Skip to content

NavigationRail for MaterialDesign3 ListBoxΒ #2578

@StefanoRivolta-Previero

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.

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