NavigationRail for MaterialDesign3 ListBox

[StefanoRivolta-Previero]

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.

[MichelMichels]

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.