Skip to content

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:

LightDark

Result:

vcADXe0g21

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions