-
Notifications
You must be signed in to change notification settings - Fork 3.5k
Description
I've updated the ListBox style to match the new MaterialDesign 3 guidelines for the NavigationRail. You can find the changes in this fork:
https://github.com/StefanoRivolta-Previero/MaterialDesignInXamlToolkit/tree/listbox
Material Design Guidelines:
Result:
The process to create an Item is a bit complex, since it needs two icons (one filled for when it's selected, and one outlined for when it's unselected) and a text under the selection border.
I've opted for the content to only be the text part, while the icons get set trough a style property, like this:
<ListBoxItem>
<ListBoxItem.Style>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource MaterialDesign3SmallNavigationRailPrimaryListBoxItem}">
<Setter Property="materialDesign:ListBoxItemAssist.SelectedIcon" Value="Circle"/>
<Setter Property="materialDesign:ListBoxItemAssist.UnselectedIcon" Value="CircleOutline"/>
</Style>
</ListBoxItem.Style>
<TextBlock Text="Test 1"/>
</ListBoxItem>
Or like this with ItemSource Binding
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource MaterialDesign3NavigationRailPrimaryListBoxItem}">
<Setter Property="materialDesign:ListBoxItemAssist.SelectedIcon" Value="{Binding SelectedIcon}"/>
<Setter Property="materialDesign:ListBoxItemAssist.UnselectedIcon" Value="{Binding UnselectedIcon}"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Resources>
<DataTemplate DataType="{x:Type local:ItemSample}">
<TextBlock Text="{Binding Title}"/>
</DataTemplate>
</ListBox.Resources>
To set the NavigationRail in "Icon only mode" you can use the property:
<Setter Property="materialDesign:ListBoxItemAssist.IsTextVisible" Value="False"/>
The sample is under NavigationRail page in MaterialDesign3Demo app.
Conclusion
So I'm waiting for feedback before cleaning up and in case making a Pull Request.
Also I'm not sure about the new Material Design 3 structure, for now the styles are in the standard MaterialDesignTheme.ListBox.xaml file. If it should go somewhere else, please let me know.


