WPF DataTrigger with OpacityMask

Question

i´m using Mahapps.Metro and want to change an icon depending on an Property.

Here is the Mahapps sample for their Icons

Setting only the Backgroundcolor("Fill") of the rectangle everything works fine. As soon as the OpacityMask is set the complete rectangle stays blank.

<Rectangle Width="20" Height="20">
    <Rectangle.Style>
        <Style TargetType="{x:Type Rectangle}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=IsOnline}" Value="True">
                    <Setter Property="Fill" Value="Green" />
                    <Setter Property="OpacityMask">
                        <Setter.Value>
                            <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_disconnect}" />
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=IsOnline}" Value="False">
                    <Setter Property="Fill" Value="Red" />
                    <Setter Property="OpacityMask">
                        <Setter.Value>
                            <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_connect}" />
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>

Any ideas what i do wrong?

score 4 · Accepted Answer · answered Feb 20 '15 at 21:38

After long time i found a working solution for me:

The first problem was the missing Ressource BlackBrush which is used inside the Icons.xaml
And the trick for the is replacing the whole Rectangle. I took an ContentControl for this job

<ContentControl>
                <ContentControl.Style>
                    <Style TargetType="{x:Type ContentControl}">
                    <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsOnline}" Value="True">
                            <Setter Property="Content" >
                                <Setter.Value>
                                    <Rectangle Fill="Green" Width="20" Height="20">
                                        <Rectangle.Resources>
                                            <SolidColorBrush x:Key="BlackBrush" Color="Black" />
                                        </Rectangle.Resources>
                                        <Rectangle.OpacityMask>
                                            <VisualBrush Visual="{StaticResource appbar_disconnect}" Stretch="Fill" />
                                        </Rectangle.OpacityMask>
                                    </Rectangle>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                            <DataTrigger Binding="{Binding Path=IsOnline}" Value="False">
                            <Setter Property="Content" >
                                <Setter.Value>
                                    <Rectangle Fill="Red" Width="20" Height="20">
                                        <Rectangle.Resources>
                                            <SolidColorBrush x:Key="BlackBrush" Color="Black" />
                                        </Rectangle.Resources>
                                        <Rectangle.OpacityMask>
                                            <VisualBrush Visual="{StaticResource appbar_connect}" Stretch="Fill" />
                                        </Rectangle.OpacityMask>
                                    </Rectangle>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ContentControl.Style>
            </ContentControl>

WPF DataTrigger with OpacityMask

1 Answers1