ux: new style of tab switcher in statistics window

This commit is contained in:
leo 2024-08-07 17:03:21 +08:00
parent 3609d46c1f
commit d4b0958f67
No known key found for this signature in database

View file

@ -55,7 +55,11 @@
SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
HorizontalAlignment="Center" HorizontalAlignment="Center"
VerticalAlignment="Center" VerticalAlignment="Center"
Background="Transparent"> Background="Transparent"
BorderThickness="1"
BorderBrush="{DynamicResource Brush.Border2}"
CornerRadius="14"
Padding="3,0">
<ListBox.ItemsPanel> <ListBox.ItemsPanel>
<ItemsPanelTemplate> <ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/> <StackPanel Orientation="Horizontal"/>
@ -64,6 +68,7 @@
<ListBox.Styles> <ListBox.Styles>
<Style Selector="ListBoxItem"> <Style Selector="ListBoxItem">
<Setter Property="Height" Value="28"/>
<Setter Property="Padding" Value="0"/> <Setter Property="Padding" Value="0"/>
<Setter Property="Background" Value="Transparent"/> <Setter Property="Background" Value="Transparent"/>
</Style> </Style>
@ -77,12 +82,15 @@
</Style> </Style>
<Style Selector="ListBoxItem Border.switcher_bg"> <Style Selector="ListBoxItem Border.switcher_bg">
<Setter Property="BorderBrush" Value="{DynamicResource Brush.Border2}"/> <Setter Property="Height" Value="22"/>
<Setter Property="CornerRadius" Value="11"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Padding" Value="16,0"/>
</Style> </Style>
<Style Selector="ListBoxItem:selected Border.switcher_bg"> <Style Selector="ListBoxItem:selected Border.switcher_bg">
<Setter Property="Background" Value="{DynamicResource Brush.Accent}"/> <Setter Property="Background" Value="{DynamicResource Brush.Accent}"/>
<Setter Property="BorderBrush" Value="{DynamicResource Brush.Accent}"/>
</Style> </Style>
<Style Selector="TextBlock.view_mode_switcher"> <Style Selector="TextBlock.view_mode_switcher">
@ -90,25 +98,29 @@
<Setter Property="Foreground" Value="{DynamicResource Brush.FG2}"/> <Setter Property="Foreground" Value="{DynamicResource Brush.FG2}"/>
</Style> </Style>
<Style Selector="ListBoxItem:pointerover TextBlock.view_mode_switcher">
<Setter Property="Foreground" Value="{DynamicResource Brush.FG1}"/>
</Style>
<Style Selector="ListBoxItem:selected TextBlock.view_mode_switcher"> <Style Selector="ListBoxItem:selected TextBlock.view_mode_switcher">
<Setter Property="Foreground" Value="White"/> <Setter Property="Foreground" Value="White"/>
</Style> </Style>
</ListBox.Styles> </ListBox.Styles>
<ListBoxItem> <ListBoxItem>
<Border Classes="switcher_bg" Height="28" Padding="16,0" BorderThickness="1,1,0,1" CornerRadius="14,0,0,14"> <Border Classes="switcher_bg">
<TextBlock Classes="view_mode_switcher" Text="{DynamicResource Text.Statistics.ThisYear}"/> <TextBlock Classes="view_mode_switcher" Text="{DynamicResource Text.Statistics.ThisYear}"/>
</Border> </Border>
</ListBoxItem> </ListBoxItem>
<ListBoxItem> <ListBoxItem>
<Border Classes="switcher_bg" Height="28" Padding="16,0" BorderThickness="1"> <Border Classes="switcher_bg">
<TextBlock Classes="view_mode_switcher" Text="{DynamicResource Text.Statistics.ThisMonth}"/> <TextBlock Classes="view_mode_switcher" Text="{DynamicResource Text.Statistics.ThisMonth}"/>
</Border> </Border>
</ListBoxItem> </ListBoxItem>
<ListBoxItem> <ListBoxItem>
<Border Classes="switcher_bg" Height="28" Padding="16,0" BorderThickness="0,1,1,1" CornerRadius="0,14,14,0"> <Border Classes="switcher_bg">
<TextBlock Classes="view_mode_switcher" Text="{DynamicResource Text.Statistics.ThisWeek}"/> <TextBlock Classes="view_mode_switcher" Text="{DynamicResource Text.Statistics.ThisWeek}"/>
</Border> </Border>
</ListBoxItem> </ListBoxItem>