PowerToys/src/modules/colorPicker/ColorPickerUI/Views/ColorEditorView.xaml
2021-10-29 10:52:41 +02:00

193 lines
9.5 KiB
XML

<UserControl x:Class="ColorPicker.Views.ColorEditorView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:p="clr-namespace:ColorPicker.Properties"
mc:Ignorable="d"
xmlns:ui="http://schemas.modernwpf.com/2019"
xmlns:e="http://schemas.microsoft.com/xaml/behaviors"
xmlns:controls="clr-namespace:ColorPicker.Controls"
xmlns:behaviors="clr-namespace:ColorPicker.Behaviors"
WindowChrome.IsHitTestVisibleInChrome="True"
x:Name="colorEditorControl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Side bar -->
<Grid Background="{DynamicResource SecondaryBackgroundBrush}">
<ui:ListView x:Name="HistoryColors"
Margin="0,48,0,0"
Grid.Row="1"
Padding="0"
TabIndex="2"
KeyboardNavigation.DirectionalNavigation="Contained"
Width="64"
AutomationProperties.Name="{x:Static p:Resources.Color_History}"
HorizontalAlignment="Center"
ui:FocusVisualHelper.UseSystemFocusVisuals="True"
ItemsSource="{Binding ColorsHistory}"
SelectedIndex="{Binding SelectedColorIndex}"
ItemContainerStyle="{DynamicResource ColorHistoryListViewStyle}"
IsItemClickEnabled="True"
ItemClick="HistoryColors_ItemClick">
<ui:ListView.ContextMenu>
<ContextMenu Visibility="{Binding ColorsHistory.Count, Converter={StaticResource numberToVisibilityConverter}}">
<MenuItem Header="{x:Static p:Resources.Remove}"
Command="{Binding RemoveColorCommand}">
<MenuItem.Icon>
<ui:FontIcon Glyph="&#xE107;" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</ui:ListView.ContextMenu>
<ui:ListView.ItemTemplate>
<DataTemplate>
<Grid Width="64" Height="48">
<Border
Width="26"
Height="26"
CornerRadius="4"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{Binding Path=., Converter={StaticResource colorToBrushConverter}}">
<Border.Effect>
<DropShadowEffect BlurRadius="6" Opacity="0.32" ShadowDepth="2" />
</Border.Effect>
</Border>
</Grid>
</DataTemplate>
</ui:ListView.ItemTemplate>
</ui:ListView>
</Grid>
<!-- Title bar -->
<Grid Grid.ColumnSpan="2"
Height="32"
Background="Transparent"
VerticalAlignment="Top"
KeyboardNavigation.DirectionalNavigation="Contained"
IsHitTestVisible="True">
<e:Interaction.Behaviors>
<behaviors:DragWindowBehavior/>
</e:Interaction.Behaviors>
<Border
Background="{DynamicResource TitleBarSecondaryForegroundBrush}"
Grid.ColumnSpan="2"
Width="30"
Height="3"
CornerRadius="1.5"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="0,1,0,0" />
<Button Width="46"
Command="{Binding OpenSettingsCommand}"
Height="32"
Content="&#xE713;"
TabIndex="2"
Background="Transparent"
FontFamily="Segoe MDL2 Assets"
HorizontalAlignment="Right"
Margin="0,0,46,0"
ToolTipService.ToolTip="{x:Static p:Resources.Open_settings}"
AutomationProperties.Name="{x:Static p:Resources.Open_settings}" />
<Button Width="64"
Height="32"
TabIndex="0"
Command="{Binding OpenColorPickerCommand}"
Background="Transparent"
FontFamily="Segoe MDL2 Assets"
ui:FocusVisualHelper.FocusVisualMargin="-1"
ToolTipService.ToolTip="{x:Static p:Resources.Pick_color}"
AutomationProperties.Name="{x:Static p:Resources.Pick_color}">
<Button.Content>
<TextBlock Text="&#xEF3C;" AutomationProperties.Name="{x:Static p:Resources.Pick_color}" />
</Button.Content>
</Button>
</Grid>
<!-- Main grid -->
<Grid Grid.Column="1"
Visibility="{Binding ColorsHistory.Count, Converter={StaticResource numberToVisibilityConverter}}">
<ScrollViewer IsTabStop="False"
Margin="0,90,0,0">
<StackPanel>
<ItemsControl IsTabStop="False"
TabIndex="4"
KeyboardNavigation.DirectionalNavigation="Contained"
FocusManager.IsFocusScope="True"
KeyboardNavigation.TabNavigation="Once"
ItemsSource="{Binding ColorRepresentations}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:ColorFormatControl
ColorFormatModel="{Binding }"
SelectedColor="{Binding ElementName=colorEditorControl, Path=DataContext.SelectedColor}"
ColorCopiedNotificationBorder="{Binding ElementName=CopiedBorderIndicator}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel
Orientation="Vertical"
Margin="0,16,0,16"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</ScrollViewer>
<controls:ColorPickerControl HorizontalAlignment="Left"
Margin="0,44,0,0"
Visibility="{Binding ColorsHistory.Count, Converter={StaticResource numberToVisibilityConverter}}"
IsTabStop="True"
TabIndex="2"
KeyboardNavigation.DirectionalNavigation="Contained"
SelectedColor="{Binding SelectedColor}"
SelectedColorChangedCommand="{Binding SelectedColorChangedCommand}"
Grid.Column="1"
VerticalAlignment="Top" />
</Grid>
<!-- Empty history -->
<StackPanel Grid.Column="1" Margin="24, 12" VerticalAlignment="Center" Orientation="Vertical" Visibility="{Binding ColorsHistory.Count, Converter={StaticResource numberToInvertedVisibilityConverter}}">
<TextBlock Text="&#xEF3C;"
FontFamily="Segoe MDL2 Assets"
FontSize="44"
HorizontalAlignment="Center"
Foreground="{DynamicResource SecondaryForegroundBrush}" />
<TextBlock Margin="0,16,0,0"
TextWrapping="Wrap"
TextAlignment="Center"
HorizontalAlignment="Center"
Foreground="{DynamicResource SecondaryForegroundBrush}"
Text="{x:Static p:Resources.No_colors_yet}"/>
</StackPanel>
<Border x:Name="CopiedBorderIndicator"
Opacity="0"
Grid.ColumnSpan="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Height="0"
Background="{DynamicResource SystemControlBackgroundAccentBrush}">
<TextBlock FontSize="16"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center"
AutomationProperties.LiveSetting="Assertive"
AutomationProperties.Name="{x:Static p:Resources.Copied_to_clipboard}">
<Run Text="&#xE16F; " FontFamily="Segoe MDL2 Assets"/>
<Run Text="{x:Static p:Resources.Copied_to_clipboard}" FontWeight="SemiBold"/>
</TextBlock>
</Border>
</Grid>
</UserControl>