Repository navigation
NavigationRail for MaterialDesign3 ListBox #2578
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.
Activity
[-]Update to MaterialDesign 3 ListBox[/-][+]NavigationRail for MaterialDesign3 ListBox[/+]MichelMichels commentedon Mar 22, 2022
This is nice work!
The style should go into MaterialDesign3.ListBox.xaml (you can see f.e. MaterialDesign3.TextBox,xaml already added).
As for the the icons in the ListBoxItem, it's a bit hairy but maybe we can have a better iteration in the future, I'm thinking maybe a custom control, but I don't know what @Keboo 's opinion is about this.