Skip to content

Commit 7567cfa

Browse files
committed
💄 left nav styling, selected state
1 parent c2ed526 commit 7567cfa

File tree

4 files changed

+65
-24
lines changed

4 files changed

+65
-24
lines changed

Biyori/Components/LeftNavigation/LeftNavigationControl.styles.xaml

+64-1
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,72 @@
77
</Style>
88
<Style TargetType="ListBox">
99
<Setter Property="Background" Value="Transparent" />
10+
<Setter Property="BorderThickness" Value="0,0,1,0"/>
11+
<Setter Property="BorderBrush" Value="{StaticResource NavBorderColor}"/>
1012
</Style>
13+
<SolidColorBrush x:Key="LeftNavMouseOn" Color="CadetBlue" Opacity=".85"/>
14+
<SolidColorBrush x:Key="LeftNavMouseOff" Color="#0f000000" />
1115
<Style TargetType="ListBoxItem">
12-
<Setter Property="Padding" Value="3px" />
1316
<Setter Property="Cursor" Value="Hand" />
17+
<Setter Property="Padding" Value="8,6"/>
18+
<Setter Property="BorderThickness" Value="4,0,0,0"/>
19+
<Setter Property="BorderBrush" Value="{StaticResource LeftNavMouseOff}"/>
20+
<Setter Property="OverridesDefaultStyle" Value="True"/>
21+
<Setter Property="Background" Value="#0f000000"/>
22+
<Setter Property="Template">
23+
<Setter.Value>
24+
<ControlTemplate TargetType="ListBoxItem">
25+
<ControlTemplate.Resources>
26+
<Storyboard x:Key="JellyClick">
27+
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
28+
Storyboard.TargetName="border"
29+
Storyboard.TargetProperty="(RenderTransform).ScaleX">
30+
<SplineDoubleKeyFrame KeyTime="0:0:0.1" Value=".9125"/>
31+
</DoubleAnimationUsingKeyFrames>
32+
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
33+
Storyboard.TargetName="border"
34+
Storyboard.TargetProperty="(RenderTransform).ScaleY">
35+
<SplineDoubleKeyFrame KeyTime="0:0:0.1" Value=".9125"/>
36+
</DoubleAnimationUsingKeyFrames>
37+
</Storyboard>
38+
<Storyboard x:Key="JellyClickOff">
39+
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
40+
Storyboard.TargetName="border"
41+
Storyboard.TargetProperty="(RenderTransform).ScaleX">
42+
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="1"/>
43+
</DoubleAnimationUsingKeyFrames>
44+
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
45+
Storyboard.TargetName="border"
46+
Storyboard.TargetProperty="(RenderTransform).ScaleY">
47+
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="1"/>
48+
</DoubleAnimationUsingKeyFrames>
49+
</Storyboard>
50+
</ControlTemplate.Resources>
51+
<Border Name="border" Padding="{TemplateBinding Padding}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
52+
<Border.RenderTransformOrigin>
53+
<Point X=".5" Y=".5" />
54+
</Border.RenderTransformOrigin>
55+
<Border.RenderTransform>
56+
<ScaleTransform ScaleX="1" ScaleY="1" RenderOptions.BitmapScalingMode="NearestNeighbor" />
57+
</Border.RenderTransform>
58+
<ContentPresenter TextOptions.TextFormattingMode="Display" Name="content" />
59+
</Border>
60+
<ControlTemplate.Triggers>
61+
<Trigger Property="IsMouseOver" Value="True">
62+
<Setter Property="Background" Value="#1f000000" />
63+
<Setter Property="Cursor" Value="Hand" />
64+
<Setter Property="BorderBrush" Value="{StaticResource LeftNavMouseOn}" />
65+
</Trigger>
66+
<Trigger Property="IsSelected" Value="True">
67+
<Setter Property="Background" Value="#1f000000" />
68+
<Setter Property="BorderBrush" Value="{StaticResource LeftNavMouseOn}" />
69+
</Trigger>
70+
<Trigger Property="IsEnabled" Value="False">
71+
<Setter Property="Opacity" Value=".65" />
72+
</Trigger>
73+
</ControlTemplate.Triggers>
74+
</ControlTemplate>
75+
</Setter.Value>
76+
</Setter>
1477
</Style>
1578
</ResourceDictionary>

Biyori/Components/LeftNavigation/LeftNavigationControl.xaml

-22
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,6 @@
1212
</UserControl.Resources>
1313
<Grid>
1414
<ListBox>
15-
<ListBox.Resources>
16-
<Style TargetType="ListBoxItem">
17-
<Setter Property="Template">
18-
<Setter.Value>
19-
<ControlTemplate TargetType="ListBoxItem">
20-
<Button Margin="2" Style="{StaticResource NavButtons}">
21-
<TextBlock><ContentPresenter /></TextBlock>
22-
</Button>
23-
</ControlTemplate>
24-
</Setter.Value>
25-
</Setter>
26-
</Style>
27-
</ListBox.Resources>
28-
<ListBox.ItemTemplate>
29-
<DataTemplate>
30-
<DockPanel>
31-
<Button Margin="4" Style="{StaticResource NavButtons}">
32-
<TextBlock><ContentPresenter /></TextBlock>
33-
</Button>
34-
</DockPanel>
35-
</DataTemplate>
36-
</ListBox.ItemTemplate>
3715
<ListBoxItem Content="Now Playing"/>
3816
<ListBoxItem Content="Anime List"/>
3917
<ListBoxItem Content="History"/>

Biyori/Lib/Styles/App.styles.xaml

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
33
xmlns:local="clr-namespace:Biyori.Lib.Styles">
4+
<SolidColorBrush Color="#cccccc" x:Key="NavBorderColor" />
45
<Style x:Key="TextboxPlaceholderStyle" TargetType="TextBlock">
56
<Setter Property="VerticalAlignment" Value="Center"/>
67
<Setter Property="FontStyle" Value="Normal" />

Biyori/MainWindow.dictionary.xaml

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
33
xmlns:local="clr-namespace:Biyori">
4-
<SolidColorBrush Color="#cccccc" x:Key="NavBorderColor" />
54
<Style x:Key="leftNav" TargetType="Border">
65
<Setter Property="BorderThickness" Value="0" />
76
<Setter Property="BorderBrush" Value="{StaticResource NavBorderColor}" />

0 commit comments

Comments
 (0)