Search code examples
data-bindingdatagriddatatriggermaterial-design-in-xaml

WPF/C# MaterialDesignInXAML, How to change badged button packicon content with datatrigger binding


Please help me with changing the PackIcon in badged button nested in DataGrid.Columns.

I have a DataGrid, which has one column filled with material design badged objects with button contents set as material design PackIcons. As shown in my code below, I tried to add a DataTrigger to change those icons by binding the button contents with a bool.

<DataGridTemplateColumn Header="Warning">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <materialDesign:Badged x:Name="badgeWarning" 
                                   Badge="{Binding MEPErrorCount, Mode=OneWay}"
                                   Margin="10"
                                   BadgeColorZoneMode="Inverted">
                <Button x:Name="BtnErrorStatus"
                        Content="{materialDesign:PackIcon AlertOutline}"
                        IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
                        Margin="0,-8,-15,0"                                            
                        Style="{StaticResource MaterialDesignFlatDarkButton}"
                        ToolTip="Icon" />
            </materialDesign:Badged>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=MEPErrorHasErrors}" Value="False">
                    <Setter TargetName="BtnErrorStatus"
                            Property="Content"
                            Value="{materialDesign:PackIcon Check}"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

However, this somehow disabled some of my buttons. As shown in the screenshot below, only the content of the firs button, circled in pink, changed as expected. The second and third buttons seem to be disabled.

enter image description here

The issue is probably related to those buttons' IsEnabled properties bindings; However, I have no idea how to fix it.
Thank you in advance for helping out.


Solution

  • After struggling with it for days, I finally figured it out.

    1. Instead of using DataTrigger, I added a converter BoolToObjectConverter.cs, copied from the link below. [post by Francisco on codeproject.com]: https://www.codeproject.com/Tips/592456/Bool-To-Content-Converter
    2. Then I add this converter to the ResourceDictionary like this.
    <local:BoolToObjectConverter x:Key="BoolToMaterialDesignPackIcon"
                                        TrueContent="Error"
                                        FalseContent="Check"
                                        NullContent="Error"/>
    
    1. Finally, I just bind the Kind property of the materialDesign:PackIcon to my property MEPErrorHasErrors like this:
    <materialDesign:Badged x:Name="badgeWarning"
                          Badge="{Binding MEPErrorCount, Mode=OneWay}"
                          Margin="10"                                                        
                          BadgeColorZoneMode="Inverted">
       <Button x:Name="BtnErrorStatus"                                                                  
               IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
               Margin="0,-8,-15,0"
               Style="{StaticResource MaterialDesignFlatButton}"
               ToolTip="Icon">
           <Button.Content>
               <materialDesign:PackIcon Kind ="{Binding MEPErrorHasErrors, Converter={StaticResource BoolToMaterialDesignPackIcon}}"/>
           </Button.Content>
       </Button>
    </materialDesign:Badged>