C# WPF Dynamic Button STYLE that has different pictures based on the x:name or x:key they have

Question

I would like to make a game like Shakes & Fidgets. I got stuck at the Main menu, where I already overcomplicated stuff as I always do. I made a grid layout, where I will put the buttons, but every button is a picture. I use ImageBrush for every button's picture I want to create.

I would like to create ONE style for every button so they change their backgrounds based on the x:Name or x:Key they have. So a Button with x:Name or x:Key "PlayGame" would find it's as the PlayGame.png, PlayGame_Hover, PlayGame_OnClick where "PlayGame" is a variable. In other words I would like to have a style that can filter the x:name, or x:key of a button, and uses it as a variable later on so I can do this: {StaticResource VARIABLENAME}

The Code I have now is:

    <ImageBrush x:Key="PlayGame">
        <ImageBrush.ImageSource>
            <BitmapImage UriSource="./Pictures/PlayGameButton.png"/>
        </ImageBrush.ImageSource>
    </ImageBrush>
    <ImageBrush x:Key="PlayGame_Hover">
        <ImageBrush.ImageSource>
            <BitmapImage UriSource="./Pictures/PlayGameButton_Hover.png"/>
        </ImageBrush.ImageSource>
    </ImageBrush>
    <ImageBrush x:Key="PlayGame_OnClick">
        <ImageBrush.ImageSource>
            <BitmapImage UriSource="./Pictures/PlayGameButton_OnClick.png"/>
        </ImageBrush.ImageSource>
    </ImageBrush>

    <Style TargetType="{x:Type Button}">
        <Setter Property="Background" Value="{StaticResource PlayGame}" />
        <Setter Property="FontSize" Value="15" />
        <Setter Property="SnapsToDevicePixels" Value="True" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border CornerRadius="4" Background="{TemplateBinding Background}">
                        <Grid>
                            <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
                        </Grid>
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{StaticResource PlayGame_Hover}" />
                        </Trigger>

                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" Value="{StaticResource PlayGame_OnClick}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

please explain why this is not effective or what you would expect. — Stefan
my problem is that i have no idea how could i filter the x:name of a button, to use it as a variable later on so 1 style could make every button's style — Gr3gYx
not effective because this way you have to create style for every single button you want to have, i actually wrote that one down. — Gr3gYx
@Gr3gYx If you have an answer to your question then post it as an answer not as an edit to the question. — Servy

Gr3gYx Gr3gYx · Accepted Answer · 2017-05-02T14:14:15

I found a not very effective solution, but not the one I actually want

You can give the Style an

x:Key="styleKey"

and you have to give the button this part:

Style="{StaticResource styleKey}"

This way you will have to make a style for every different button you want to have, but it will work, and you will be happy about it if efficency is not key.:D

C# WPF Dynamic Button STYLE that has different pictures based on the x:name or x:key they have

1 Answers

x:Key="styleKey"

Style="{StaticResource styleKey}"