<!--
	Copyright (c) Microsoft. All rights reserved.
-->

<UserControl x:Class="MOX.AppBar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:vsm='using:Windows.UI.Xaml'
	xmlns:mox="using:MOX"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
	<UserControl.Resources>
		<!--
		AppBarButtonStyle is used to style a Button for use in an App Bar.  Content will be centered and should fit within
		the 40-pixel radius glyph provided.  12-point Segoe UI Symbol is used for content text to simplify the use of glyphs
		from that font.  AutomationProperties.Name is used for the text below the glyph.
		-->
		<Style x:Key="AppBarButtonStyle" TargetType="ButtonBase">
			<Setter Property="Foreground" Value="{CustomResource :mso_brush:628}"/>
			<Setter Property="VerticalAlignment" Value="Stretch"/>
			<Setter Property="FontFamily" Value="{StaticResource MsoSymbolThemeFontFamily}"/>
			<Setter Property="FontWeight" Value="Normal"/>
			<Setter Property="FontSize" Value="20"/>
			<Setter Property="AutomationProperties.ItemType" Value="App Bar Button"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ButtonBase">
						<Grid Width="100" Background="Transparent" x:Name="ItemGrid">
							<StackPanel VerticalAlignment="Top" Margin="0,14,0,13">
								<Grid Width="40" Height="40" Margin="0,0,0,5" HorizontalAlignment="Center">
									<Ellipse x:Name="Outline" Stroke="{CustomResource :mso_brush:628}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="2" Fill="Transparent"/>
									<TextBlock x:Name="Content" HorizontalAlignment="Center" Margin="-1,-1,0,0" VerticalAlignment="Center" Text="{Binding SegoeIconOverride}" FontSize="18.66"/>
								</Grid>
								<TextBlock
									x:Name="TextLabel"
									Text="{TemplateBinding AutomationProperties.Name}"
									Margin="0,0,2,0"
									Style="{StaticResource MsoTextBlockSmall}"
									TextAlignment="Center"
									Width="88"
									MaxHeight="32"
									TextTrimming="WordEllipsis"
									TextWrapping="Wrap"/>
							</StackPanel>
							<Rectangle
								x:Name="FocusVisualWhite"
								IsHitTestVisible="False"
								Stroke="{CustomResource :mso_brush:3083}"
								StrokeThickness="2"
								StrokeEndLineCap="Square"
								Opacity="0"/>
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="PointerOver">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Outline" Storyboard.TargetProperty="Fill">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{CustomResource :mso_brush:2414}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{CustomResource :mso_brush:629}" />
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Pressed">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Outline" Storyboard.TargetProperty="Fill">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{CustomResource :mso_brush:628}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{CustomResource :mso_brush:1232}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Checked">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Outline" Storyboard.TargetProperty="Fill">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{CustomResource :mso_brush:628}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{CustomResource :mso_brush:1232}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Outline" Storyboard.TargetProperty="Stroke">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{CustomResource :mso_brush:2413}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{CustomResource :mso_brush:2413}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{CustomResource :mso_brush:2413}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="FocusStates">
									<VisualState x:Name="Focused">
										<Storyboard>
											<DoubleAnimation
												Storyboard.TargetName="FocusVisualWhite"
												Storyboard.TargetProperty="Opacity"
												To="1"
												Duration="0"/>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Unfocused" />
									<VisualState x:Name="PointerFocused" />
								</VisualStateGroup>
								<VisualStateGroup x:Name="OrientationStates">
									<VisualState x:Name="FullScreenLandscape" />
									<VisualState x:Name="Filled" />
									<VisualState x:Name="Snapped">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
												<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
											</ObjectAnimationUsingKeyFrames>
											<DoubleAnimation
												Storyboard.TargetName="ItemGrid"
												Storyboard.TargetProperty="Width"
												To="60"
												Duration="0" />
										</Storyboard>
									</VisualState>
									<VisualState x:Name="FullScreenPortrait">
										<Storyboard>
											<DoubleAnimation
												Storyboard.TargetName="ItemGrid"
												Storyboard.TargetProperty="Width"
												To="90"
												Duration="0" />
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Style x:Key="AppBarSeparatorStyle" TargetType="ContentControl">
			<Setter Property="IsTabStop" Value="False" />
			<Setter Property="AutomationProperties.ItemType" Value="App Bar Separator"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ContentControl">
						<Canvas Width="60" x:Name="SeparatorCanvas">
							<Line x:Name="SeparatorLine" Stroke="{CustomResource :mso_brush:2415}" StrokeThickness="1"
								X1="29" Y1="14" 
								X2="29" Y2="54" />
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="OrientationStates">
									<VisualState x:Name="FullScreenLandscape" />
									<VisualState x:Name="Filled" />
									<VisualState x:Name="Snapped">
										<Storyboard>
											<DoubleAnimation
												Storyboard.TargetName="SeparatorCanvas"
												Storyboard.TargetProperty="Width"
												To="40"
												Duration="0" />
											<DoubleAnimation
												Storyboard.TargetName="SeparatorLine"
												Storyboard.TargetProperty="X1"
												To="19"
												Duration="0" />
											<DoubleAnimation
												Storyboard.TargetName="SeparatorLine"
												Storyboard.TargetProperty="X2"
												To="19"
												Duration="0" />
										</Storyboard>
									</VisualState>
									<VisualState x:Name="FullScreenPortrait">
										<Storyboard>
											<DoubleAnimation
												Storyboard.TargetName="SeparatorCanvas"
												Storyboard.TargetProperty="Width"
												To="40"
												Duration="0" />
											<DoubleAnimation
												Storyboard.TargetName="SeparatorLine"
												Storyboard.TargetProperty="X1"
												To="19"
												Duration="0" />
											<DoubleAnimation
												Storyboard.TargetName="SeparatorLine"
												Storyboard.TargetProperty="X2"
												To="19"
												Duration="0" />
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
						</Canvas>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<mox:AppBarExecuteActionAfterExecutedHandler x:Key="ExecuteActionAfterExecutedHandler" />
		<DataTemplate x:Key="ButtonTemplate">
			<mox:ExecuteAction Action="OnCommand" 
							   AutomationProperties.Name="{Binding Label, Converter={StaticResource StripAccelerator}}" 
							   Style="{StaticResource AppBarButtonStyle}" 
							   IsEnabled="{Binding Enabled}" 
							   Visibility="{Binding IsVisible, Converter={StaticResource BoolToVisibility}}" 
							   ToolTipService.ToolTip="{Binding Tooltip}"
							   AfterExecuted="{StaticResource ExecuteActionAfterExecutedHandler}" />
		</DataTemplate>
		<DataTemplate x:Key="SeparatorTemplate">
			<ContentControl Style="{StaticResource AppBarSeparatorStyle}" 
							Visibility="{Binding IsVisible, Converter={StaticResource BoolToVisibility}}" /> 
		</DataTemplate>
		<mox:AppBarPopupUser x:Key="AppBarPopupUser" />
		<DataTemplate x:Key="PopupTemplate">
			<mox:PopupButton AutomationProperties.Name="{Binding Label, Converter={StaticResource StripAccelerator}}" 
							 Style="{StaticResource AppBarButtonStyle}" 
							 IsEnabled="{Binding Enabled}" 
							 PopupUser="{StaticResource AppBarPopupUser}" 
							 Visibility="{Binding IsVisible, Converter={StaticResource BoolToVisibility}}" 
							 ToolTipService.ToolTip="{Binding Tooltip}" />
		</DataTemplate>
		<DataTemplate x:Key="ToggleTemplate">
			<mox:AppBarToggleButton AutomationProperties.Name="{Binding Label, Converter={StaticResource StripAccelerator}}" 
									Style="{StaticResource AppBarButtonStyle}" 
									IsEnabled="{Binding Enabled}" 
									IsChecked="{Binding IsOn, Mode=TwoWay}" 
									Visibility="{Binding IsVisible, Converter={StaticResource BoolToVisibility}}" 
									ToolTipService.ToolTip="{Binding Tooltip}" />
		</DataTemplate>
		<mox:AppBarItemDataTemplateSelector x:Key="AppBarItemDataTemplateSelector" 
											ButtonTemplate="{StaticResource ButtonTemplate}" 
											SeparatorTemplate="{StaticResource SeparatorTemplate}"
											ToggleTemplate="{StaticResource ToggleTemplate}" 
											PopupTemplate="{StaticResource PopupTemplate}" />
	</UserControl.Resources>
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*"/>
		</Grid.ColumnDefinitions>
		<ItemsControl x:Name="ABCtxItemsControl" Grid.Column="0" HorizontalAlignment="Left" ItemsControl.ItemTemplateSelector="{StaticResource AppBarItemDataTemplateSelector}" IsTabStop="False">
			<ItemsControl.ItemsPanel>
				<ItemsPanelTemplate>
					<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" />
				</ItemsPanelTemplate>
			</ItemsControl.ItemsPanel>
		</ItemsControl>
		<ItemsControl x:Name="ABCenteredItemsControl" Grid.Column="0" HorizontalAlignment="Center" ItemsControl.ItemTemplateSelector="{StaticResource AppBarItemDataTemplateSelector}" IsTabStop="False">
			<ItemsControl.ItemsPanel>
				<ItemsPanelTemplate>
					<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" />
				</ItemsPanelTemplate>
			</ItemsControl.ItemsPanel>
		</ItemsControl>
		<ItemsControl x:Name="ABGlobalItemsControl" Grid.Column="0" HorizontalAlignment="Right" ItemsControl.ItemTemplateSelector="{StaticResource AppBarItemDataTemplateSelector}" IsTabStop="False">
			<ItemsControl.ItemsPanel>
				<ItemsPanelTemplate>
					<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" />
				</ItemsPanelTemplate>
			</ItemsControl.ItemsPanel>
		</ItemsControl>
	</Grid>
</UserControl>
