Change Background color to a Visual pattern based

I have a list of elements (simple buttons with plain textblock) which are color coded based on the list item content. User can update the Listitem and thus listitem color should change. For certain listitem background colors like "Red", I want to add a pattern as well.

I have added the following VisualPatterns in XAML:

<Window.Resources>
    <VisualBrush x:Key="FwdPattern" TileMode="Tile" Viewport="0,0,15,15" ViewportUnits="Absolute" Viewbox="0,0,15,15" ViewboxUnits="Absolute">
        <VisualBrush.Visual>
            <Grid>
                <Path Data="M 0 15 L 15 0" Stroke="Gray" />
            </Grid>
        </VisualBrush.Visual>
    </VisualBrush>
    <VisualBrush x:Key="BckPattern" TileMode="Tile" Viewport="0,0,15,15" ViewportUnits="Absolute" Viewbox="0,0,15,15" ViewboxUnits="Absolute">
        <VisualBrush.Visual>
            <Grid>
                <Path Data="M 0 0 L 15 15" Stroke="Gray" />
            </Grid>
        </VisualBrush.Visual>
    </VisualBrush>
</Window.Resources>

Button template used in ListItem is:

<Border Background="{Binding BackgroundClr}">
    <Button Name="MyButton" Content="Testing">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Background" Value="{Binding BackgroundClr}"/>
                <Style.Triggers>

                <!-- This does not work, see [http://ift.tt/2css5xy] -->

                    <DataTrigger Binding="{Binding BackgroundClr}" Value="Red">
                        <Setter Property="Background" Value="{StaticResource BckPattern}"/>
                    </DataTrigger>

                <!-- This does not work either, it goes in infinite loop 
                     and StackOverflow exception is thrown- 
                     probably because I am reading the background color in
                     the datatrigger and again updating it- but i dont know-->

                    <DataTrigger Binding="{Binding Background.Color, RelativeSource={RelativeSource Self}}" Value="Red">
                       <Setter Property="Background" Value="{StaticResource BckPattern}"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>
</Border>

Currently I have no other knowledge except the Button BackgroundClr from VM to determine if I need to provide a pattern or not.

• Tried Solutions

  1. One solution is to have a bound property- PatternName and based on it, determine which pattern to apply:

The above code works, but I have to have an additional property in VM

2. The other solution is to access VisualBrush in VM and directly apply the pattern in BackgroundClr - i have not figured out how to do this yet.

Which is a better solution or there any other way to achieve the same?

Thanks,

RDV