Materialdesigninxamltoolkit: Delete icon not visible in Chips

Created on 8 Oct 2017  路  5Comments  路  Source: MaterialDesignInXAML/MaterialDesignInXamlToolkit

image

            <ListBox.ItemTemplate>
                <DataTemplate>
                    <materialDesign:Chip Content="{Binding}" 
                                         IsDeletable="True"
                                         DeleteClick="RemoveAuthorFromList"
                                         DeleteCommandParameter="{Binding ElementName=LstAuthor, Path=SelectedIndex}"
                                         Margin="0 0 4 4">
                    </materialDesign:Chip>
                </DataTemplate>
            </ListBox.ItemTemplate>

*GitHub Repo : https://github.com/Prathik-Jain/Carrel-LibraryManagmentSystem *

Hacktoberfest up-for-grabs

Most helpful comment

The problem is your style for PackIcon:

        <Style TargetType="materialDesign:PackIcon">
            <Setter Property="Grid.Column" Value="1" />
            <Setter Property="Margin" Value="16" />
            <Setter Property="Height" Value="24" />
            <Setter Property="Width" Value="24" />
            <Setter Property="VerticalAlignment" Value="Bottom" />
            <Setter Property="HorizontalAlignment" Value="Right" />
            <Setter Property="Foreground" Value="#000000" />
            <Setter Property="Opacity" Value="0.54" />
        </Style>

The cross icon you are expecting on the chip is rendered by a PackIcon control but you have overriden the style so that the combination of Width, Height and Margin does not fit into the space of the delete button.

You could give the style a key and use it on those icons that needs it and leave the default style of PackIcon intact for chip delete button.

It does not seem necessary for this issue but in the future we could add a new property like DeleteButtonPackIconStyle to the Chip control.

All 5 comments

Hello there! Could you describe a little bit more about it?

@ButchersBoy - Any Solution?

The problem is your style for PackIcon:

        <Style TargetType="materialDesign:PackIcon">
            <Setter Property="Grid.Column" Value="1" />
            <Setter Property="Margin" Value="16" />
            <Setter Property="Height" Value="24" />
            <Setter Property="Width" Value="24" />
            <Setter Property="VerticalAlignment" Value="Bottom" />
            <Setter Property="HorizontalAlignment" Value="Right" />
            <Setter Property="Foreground" Value="#000000" />
            <Setter Property="Opacity" Value="0.54" />
        </Style>

The cross icon you are expecting on the chip is rendered by a PackIcon control but you have overriden the style so that the combination of Width, Height and Margin does not fit into the space of the delete button.

You could give the style a key and use it on those icons that needs it and leave the default style of PackIcon intact for chip delete button.

It does not seem necessary for this issue but in the future we could add a new property like DeleteButtonPackIconStyle to the Chip control.

Thank you so much @mgnslndh !!

Was this page helpful?
0 / 5 - 0 ratings