[Image Resizer] Visual updates + NumberBox (#10596)

* Input page visual updates + NumberBox

* Update UI

* Update to NumberBoxes

* Update src/modules/imageresizer/ui/Views/InputPage.xaml

* Update src/modules/imageresizer/ui/Views/InputPage.xaml

* Formatting

Co-authored-by: Niels Laute <niels9001@hotmail.com>
Co-authored-by: Enrico Giordani <enricogior@users.noreply.github.com>
Co-authored-by: Enrico Giordani <enrico.giordani@gmail.com>
This commit is contained in:
Niels Laute 2021-04-16 10:15:50 +02:00 committed by GitHub
parent 43a73065af
commit 71cf94b330
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -17,7 +17,9 @@
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="DisabledWhenUnselectedTextBoxStyle" TargetType="TextBox" BasedOn="{StaticResource DefaultTextBoxStyle}">
<Style x:Key="DisabledWhenUnselectedTextBoxStyle"
TargetType="ui:NumberBox"
>
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}" Value="True">
<Setter Property="IsEnabled" Value="True"/>
@ -67,25 +69,49 @@
<ListBox.Resources>
<DataTemplate DataType="{x:Type m:ResizeSize}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" FontWeight="SemiBold" Foreground="{DynamicResource PrimaryForegroundBrush}"/>
<TextBlock Text="(" Margin="4,0,0,0" Foreground="{DynamicResource SecondaryForegroundBrush}"/>
<TextBlock Text="{Binding Fit,Converter={StaticResource EnumValueConverter},ConverterParameter=ThirdPersonSingular}" Foreground="{DynamicResource SecondaryForegroundBrush}"/>
<Grid Margin="0,0,0,4">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}"
FontWeight="SemiBold"
FontSize="16"
Margin="0,-2,0,0"
VerticalAlignment="Top"
Foreground="{DynamicResource PrimaryForegroundBrush}" />
<StackPanel Orientation="Horizontal"
Grid.Row="1"
VerticalAlignment="Top">
<TextBlock Text="{Binding Fit,Converter={StaticResource EnumValueConverter},ConverterParameter=ThirdPersonSingular}" Foreground="{DynamicResource SecondaryForegroundBrush}"/>
<TextBlock Text="{Binding Width,Converter={StaticResource AutoDoubleConverter},ConverterParameter=Auto}" Margin="4,0,0,0" Foreground="{DynamicResource SecondaryForegroundBrush}"/>
<TextBlock Text="&#xE711;" FontSize="11" FontFamily="Segoe MDL2 Assets" Visibility="{Binding ShowHeight,Converter={StaticResource BoolValueConverter}}" Margin="4,5,0,0" Foreground="{DynamicResource SecondaryForegroundBrush}"/>
<TextBlock Text="{Binding Height,Converter={StaticResource AutoDoubleConverter},ConverterParameter=Auto}" Visibility="{Binding ShowHeight,Converter={StaticResource BoolValueConverter}}" Margin="4,0,0,0" Foreground="{DynamicResource SecondaryForegroundBrush}"/>
<TextBlock Text="{Binding Unit,Converter={StaticResource EnumValueConverter},ConverterParameter=ToLower}" Margin="4,0,0,0" Foreground="{DynamicResource SecondaryForegroundBrush}"/>
<TextBlock Text=")" Foreground="{DynamicResource SecondaryForegroundBrush}"/>
</StackPanel>
<TextBlock Text="{Binding Unit,Converter={StaticResource EnumValueConverter},ConverterParameter=ToLower}"
Margin="4,0,0,0"
Foreground="{DynamicResource SecondaryForegroundBrush}" />
</StackPanel>
</Grid>
</DataTemplate>
<DataTemplate DataType="{x:Type m:CustomSize}">
<StackPanel Orientation="Horizontal" Margin="0,-8,0,0">
<TextBlock VerticalAlignment="Center"
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="32" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Top"
Text="{Binding Name}"
FontSize="16"
Margin="0,-2,0,0"
Foreground="{DynamicResource PrimaryForegroundBrush}"
FontWeight="SemiBold"/>
<ComboBox Margin="8,0,0,0"
FontWeight="SemiBold" />
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="0,-8,0,0">
<ComboBox Margin="0,0,0,0"
ItemsSource="{Binding Source={StaticResource ResizeFitValues}}"
Style="{StaticResource DisabledWhenUnselectedComboBoxStyle}"
AutomationProperties.Name="{x:Static p:Resources.Resize_Type}"
@ -96,22 +122,19 @@
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<TextBox Width="56"
TextWrapping="Wrap"
Style="{StaticResource DisabledWhenUnselectedTextBoxStyle}"
AutomationProperties.Name="{x:Static p:Resources.Width}"
Margin="8,0,0,0">
<TextBox.Text>
<Binding Converter="{StaticResource AutoDoubleConverter}"
Path="Width"
UpdateSourceTrigger="PropertyChanged">
<Binding.ValidationRules>
<local:AutoDoubleValidationRule/>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
<TextBlock VerticalAlignment="Center"
<ui:NumberBox SpinButtonPlacementMode="Compact"
Minimum="1"
Width="102"
Style="{StaticResource DisabledWhenUnselectedTextBoxStyle}"
AutomationProperties.Name="{x:Static p:Resources.Width}"
Margin="8,0,0,0">
<ui:NumberBox.Value>
<Binding Path="Width"
UpdateSourceTrigger="PropertyChanged">
</Binding>
</ui:NumberBox.Value>
</ui:NumberBox>
<TextBlock VerticalAlignment="Center"
Text="&#xE711;"
FontFamily="Segoe MDL2 Assets"
Width="25"
@ -121,22 +144,19 @@
TextAlignment="Center"
Visibility="{Binding ShowHeight,Converter={StaticResource BoolValueConverter}}"/>
<TextBox Width="56"
Style="{StaticResource DisabledWhenUnselectedTextBoxStyle}"
TextWrapping="Wrap"
AutomationProperties.Name="{x:Static p:Resources.Height}"
Visibility="{Binding ShowHeight,Converter={StaticResource BoolValueConverter}}">
<TextBox.Text>
<Binding Converter="{StaticResource AutoDoubleConverter}"
Path="Height"
UpdateSourceTrigger="PropertyChanged">
<Binding.ValidationRules>
<local:AutoDoubleValidationRule/>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
<ComboBox Margin="8,0,0,0"
<ui:NumberBox Style="{StaticResource DisabledWhenUnselectedTextBoxStyle}"
SpinButtonPlacementMode="Compact"
Minimum="1"
Width="102"
AutomationProperties.Name="{x:Static p:Resources.Height}"
Visibility="{Binding ShowHeight,Converter={StaticResource BoolValueConverter}}">
<ui:NumberBox.Value>
<Binding Path="Height"
UpdateSourceTrigger="PropertyChanged">
</Binding>
</ui:NumberBox.Value>
</ui:NumberBox>
<ComboBox Margin="8,0,0,0"
ItemsSource="{Binding Source={StaticResource ResizeUnitValues}}"
Style="{StaticResource DisabledWhenUnselectedComboBoxStyle}"
AutomationProperties.Name="{x:Static p:Resources.Unit}"
@ -148,6 +168,7 @@
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.Resources>
</ListBox>