Skip to content

Add NavigationListBox Style #2335

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Keboo merged 6 commits into from
Jun 2, 2021
Merged

Add NavigationListBox Style #2335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4527de7
Add NavigationListBox
StefanoRivolta-Previero May 26, 2021
50d995f
Set ListBox in LeftDrawer to be a NavigationListBox
StefanoRivolta-Previero May 26, 2021
3e9a5f8
Add default Navigation styles
StefanoRivolta-Previero May 26, 2021
08cae64
Set Drawer ListBox to Primary color
StefanoRivolta-Previero May 26, 2021
2438323
Set Drawer ListBox to Primary color style
StefanoRivolta-Previero May 31, 2021
77eea43
Code Cleanup
StefanoRivolta-Previero May 31, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions MainDemo.Wpf/MainWindow.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,14 +81,14 @@
SelectedItem="{Binding SelectedItem, UpdateSourceTrigger=PropertyChanged}"
ItemsSource="{Binding DemoItems}"
PreviewMouseLeftButtonUp="UIElement_OnPreviewMouseLeftButtonUp"
AutomationProperties.Name="DemoPagesListBox">
AutomationProperties.Name="DemoPagesListBox"
Style="{StaticResource MaterialDesignNavigationPrimaryListBox}">
<ListBox.Resources>
<Style TargetType="ScrollBar" BasedOn="{StaticResource MaterialDesignScrollBarMinimal}"/>
</ListBox.Resources>

<ListBox.ItemTemplate>
<DataTemplate DataType="domain:DemoItem">
<TextBlock Text="{Binding Name}" Margin="32 0 32 0" AutomationProperties.AutomationId="DemoItemPage"/>
<TextBlock Text="{Binding Name}" Margin="24 4 0 4" AutomationProperties.AutomationId="DemoItemPage"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Expand Down
22 changes: 22 additions & 0 deletions MaterialDesignThemes.Wpf/ListBoxItemAssist.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
using System.Windows;

namespace MaterialDesignThemes.Wpf
{
public static class ListBoxItemAssist
{

private static readonly CornerRadius DefaultCornerRadius = new CornerRadius(2.0);

#region AttachedProperty : CornerRadiusProperty
/// <summary>
/// Controls the corner radius of the selection box.
/// </summary>
public static readonly DependencyProperty CornerRadiusProperty
= DependencyProperty.RegisterAttached("CornerRadius", typeof(CornerRadius), typeof(ListBoxItemAssist), new PropertyMetadata(DefaultCornerRadius));

public static CornerRadius GetCornerRadius(DependencyObject element) => (CornerRadius)element.GetValue(CornerRadiusProperty);
public static void SetCornerRadius(DependencyObject element, CornerRadius value) => element.SetValue(CornerRadiusProperty, value);
#endregion

}
}
179 changes: 166 additions & 13 deletions MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ListBox.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.RadioButton.xaml" />
<ResourceDictionary>
<converters:BrushRoundConverter x:Key="BrushRoundConverter"/>
<converters:BorderClipConverter x:Key="BorderClipConverter" />
<converters:IsDarkConverter x:Key="IsDarkConverter" />
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>

Expand Down Expand Up @@ -209,7 +211,7 @@
</Setter.Value>
</Setter>
</Style>

<Style x:Key="MaterialDesignToolToggleFlatListBox" TargetType="{x:Type ListBox}" BasedOn="{StaticResource MaterialDesignToolToggleListBox}">
<Setter Property="wpf:ShadowAssist.ShadowDepth" Value="Depth0" />
</Style>
Expand Down Expand Up @@ -273,13 +275,8 @@
Opacity="0"
Background="{TemplateBinding Foreground, Converter={StaticResource BrushRoundConverter}}"/>

<Border x:Name="SelectedBorder"
Opacity="0"
Background="{TemplateBinding Foreground, Converter={StaticResource BrushRoundConverter}}"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<ScaleTransform ScaleX="1"/>
</Border.RenderTransform>
<Border x:Name="SelectedBorder" Opacity="0"
Background="{TemplateBinding Foreground, Converter={StaticResource BrushRoundConverter}}">
</Border>
<wpf:Ripple Feedback="{TemplateBinding Foreground, Converter={StaticResource BrushRoundConverter}}"
Focusable="False"
Expand Down Expand Up @@ -325,6 +322,150 @@
</Setter>
</Style>

<Style x:Key="MaterialDesignNavigationListBoxItem" TargetType="{x:Type ListBoxItem}">
<Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}"/>
<Setter Property="Background" Value="{DynamicResource MaterialDesignBody}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Margin" Value="4 2 4 2"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="wpf:ListBoxItemAssist.CornerRadius" Value="4"/>

<Setter Property="wpf:ThemeAssist.TriggerBrush" Value="{DynamicResource MaterialDesignPaper}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="border"
Margin="{TemplateBinding Margin}"
CornerRadius="{Binding Path=(wpf:ListBoxItemAssist.CornerRadius), RelativeSource={RelativeSource TemplatedParent}}"
ClipToBounds="{TemplateBinding ClipToBounds}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3" To="Normal">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState Name="Normal"/>
<VisualState Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MouseOverBorder" Storyboard.TargetProperty="Opacity"
To="0.1" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.6"/>
</VisualStateGroup.Transitions>
<VisualState Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectedBorder"
Storyboard.TargetProperty="Opacity"
To="0.12" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState Name="Unselected"/>
<VisualState Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectedBorder"
Storyboard.TargetProperty="Opacity"
To="0.12" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.Clip>
<MultiBinding Converter="{StaticResource BorderClipConverter}">
<Binding ElementName="border" Path="ActualWidth" />
<Binding ElementName="border" Path="ActualHeight" />
<Binding ElementName="border" Path="CornerRadius" />
<Binding ElementName="border" Path="BorderThickness" />
</MultiBinding>
</Grid.Clip>
<Border x:Name="MouseOverBorder"
Opacity="0"
Background="{TemplateBinding Foreground, Converter={StaticResource BrushRoundConverter}}"/>

<Border x:Name="SelectedBorder" Opacity="0"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
</Border>
<wpf:Ripple Feedback="{TemplateBinding Foreground, Converter={StaticResource BrushRoundConverter}}"
Focusable="False"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Padding="{TemplateBinding Padding}"
RecognizesAccessKey="False">
</wpf:Ripple>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value=".56" />
</Trigger>

<Trigger Property="IsSelected" Value="False">
<Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}"/>
</Trigger>

</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>

</Style>

<Style x:Key="MaterialDesignNavigationPrimaryListBoxItem" TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource MaterialDesignNavigationListBoxItem}">
<Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}"/>
<Setter Property="Background" Value="{DynamicResource PrimaryHueMidBrush}"/>

<Setter Property="wpf:ThemeAssist.TriggerBrush" Value="{DynamicResource MaterialDesignPaper}" />

<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=(wpf:ThemeAssist.TriggerBrush), RelativeSource={RelativeSource Self}, Converter={StaticResource IsDarkConverter}}" Value="True"/>
<Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Foreground" Value="{DynamicResource PrimaryHueLightBrush}" />
<Setter Property="Background" Value="{DynamicResource PrimaryHueLightBrush}" />
</MultiDataTrigger>
</Style.Triggers>

</Style>

<Style x:Key="MaterialDesignNavigationAccentListBoxItem" TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource MaterialDesignNavigationListBoxItem}">
<Setter Property="Foreground" Value="{DynamicResource SecondaryHueMidBrush}"/>
<Setter Property="Background" Value="{DynamicResource SecondaryHueMidBrush}"/>

<Setter Property="wpf:ThemeAssist.TriggerBrush" Value="{DynamicResource MaterialDesignPaper}" />

<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=(wpf:ThemeAssist.TriggerBrush), RelativeSource={RelativeSource Self}, Converter={StaticResource IsDarkConverter}}" Value="True"/>
<Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Foreground" Value="{DynamicResource SecondaryHueLightBrush}" />
<Setter Property="Background" Value="{DynamicResource SecondaryHueLightBrush}" />
</MultiDataTrigger>
</Style.Triggers>

</Style>

<Style x:Key="MaterialDesignListBox" TargetType="{x:Type ListBox}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
Expand Down Expand Up @@ -363,6 +504,18 @@
<Setter Property="ItemContainerStyle" Value="{StaticResource MaterialDesignCardsListBoxItem}"/>
</Style>

<Style x:Key="MaterialDesignNavigationListBox" TargetType="{x:Type ListBox}" BasedOn="{StaticResource MaterialDesignListBox}">
<Setter Property="ItemContainerStyle" Value="{StaticResource MaterialDesignNavigationListBoxItem}"/>
</Style>

<Style x:Key="MaterialDesignNavigationPrimaryListBox" TargetType="{x:Type ListBox}" BasedOn="{StaticResource MaterialDesignListBox}">
<Setter Property="ItemContainerStyle" Value="{StaticResource MaterialDesignNavigationPrimaryListBoxItem}"/>
</Style>

<Style x:Key="MaterialDesignNavigationAccentListBox" TargetType="{x:Type ListBox}" BasedOn="{StaticResource MaterialDesignListBox}">
<Setter Property="ItemContainerStyle" Value="{StaticResource MaterialDesignNavigationAccentListBoxItem}"/>
</Style>

<Style x:Key="MaterialDesignFilterChipListBoxItem" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
Expand Down Expand Up @@ -526,11 +679,11 @@
</Setter.Value>
</Setter>
</Style>

<Style x:Key="MaterialDesignFilterChipPrimaryOutlineListBox" TargetType="{x:Type ListBox}" BasedOn="{StaticResource MaterialDesignFilterChipListBox}">
<Setter Property="ItemContainerStyle" Value="{StaticResource MaterialDesignFilterChipPrimaryOutlineListBoxItem}"/>
</Style>

<Style x:Key="MaterialDesignFilterChipAccentOutlineListBoxItem" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
Expand Down Expand Up @@ -580,7 +733,7 @@
<Setter Property="SelectionMode" Value="Single"/>
<Setter Property="ItemContainerStyle" Value="{StaticResource MaterialDesignChoiceChipListBoxItem}"/>
</Style>

<Style x:Key="MaterialDesignChoiceChipPrimaryListBoxItem" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
Expand Down Expand Up @@ -655,7 +808,7 @@
<Style x:Key="MaterialDesignChoiceChipOutlineListBox" TargetType="{x:Type ListBox}" BasedOn="{StaticResource MaterialDesignChoiceChipListBox}">
<Setter Property="ItemContainerStyle" Value="{StaticResource MaterialDesignChoiceChipOutlineListBoxItem}"/>
</Style>

<Style x:Key="MaterialDesignChoiceChipPrimaryOutlineListBoxItem" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
Expand All @@ -679,7 +832,7 @@

<Style x:Key="MaterialDesignChoiceChipPrimaryOutlineListBox" TargetType="{x:Type ListBox}" BasedOn="{StaticResource MaterialDesignChoiceChipListBox}">
<Setter Property="ItemContainerStyle" Value="{StaticResource MaterialDesignChoiceChipPrimaryOutlineListBoxItem}"/>
</Style>
</Style>

<Style x:Key="MaterialDesignChoiceChipAccentOutlineListBoxItem" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
Expand Down