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