Search code examples
csswpfxamlstylesuniformgrid

WPF UnifromGrid:How to style selected Child with rounded corners like in Explorer


This is a link for a question asked before, which concerns a TreeView:

WPF TreeView: How to style selected items with rounded corners like in Explorer

And this is another link for another question asked too, which concerns a ListView:

WPF ListView: How to style selected items with rounded corners like in Explorer

My question is : How to migrate this Solution on a UniformGrid ? Because I want to have the same effect as shown in the 2 examples, on my UniformGrid Cells.

here is an example of my source code:

<Grid VerticalAlignment="Center" HorizontalAlignment="Center" >
    <ItemsControl ItemsSource="{Binding ChildrenList}"  BorderThickness="0"  
        HorizontalContentAlignment="Center" VerticalContentAlignment="Center" >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="{Binding NumberOfColumns}" HorizontalAlignment=
                    "Center" Background="Transparent" Margin="4,4,4,4" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

Solution

  • You're half-way there already :)

    You need to use a ListBox instead of an ItemsControl (because ItemsControl doesn't handle selection and has no such thing as a "selected item").

    Then you use the same ItemsPanel as in your example, and the same ItemContainerStyle as in the ListView post you linked to (note: just make sure you rename stuff from "ItemsControl"/"ListView" and "ListViewItem" to "ListBox" and "ListBoxItem"):

    <ListBox ItemsSource="{Binding ChildrenList}" >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="{Binding NumberOfColumns}" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    
        <!-- NOTE: "ListBox" and "ListBoxItem": -->
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                ...
            </Style>
        </ListBox.ItemContainerStyle>
    
    </ListBox>