WPF/C#: Creating a button style: Text + Image

Question

I just want to ask how should I put my image (dynamically) in this following code:

<Style x:Key="ButtonStyler" TargetType="{x:Type Button}">
    <Setter Property="Background">
        <Setter.Value>
            <RadialGradientBrush>
                <RadialGradientBrush.GradientStops>
                    <GradientStopCollection>
                        <GradientStop Color="black" Offset="0" />
                        <GradientStop Color="black" Offset="1" />
                    </GradientStopCollection>
                </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Height" Value="40" />
    <Setter Property="Foreground" Value="white" />
    <Setter Property="Grid.Row" Value="2" />
    <Setter Property="Grid.Column" Value="3" />
    <Setter Property="Content" Value="Forgot your password?" />
    <Setter Property="ContentTemplate"
            Value="{DynamicResource myContentTemplate}" />
    <Setter Property="Margin" Value="3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Rectangle x:Name="GelBackground"
                            Opacity="1"
                            RadiusX="9"
                            RadiusY="9"
                            Fill="{TemplateBinding Background}"
                            StrokeThickness="0.35">
                        <Rectangle.Stroke>
                            <LinearGradientBrush StartPoint="0,0"
                                    EndPoint="0,1">
                                <LinearGradientBrush.GradientStops>
                                    <GradientStopCollection>
                                        <GradientStop Color="white"
                                                Offset="0" />
                                        <GradientStop Color="#666666"
                                                Offset="1" />
                                    </GradientStopCollection>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Rectangle.Stroke>
                    </Rectangle>
                    <Rectangle x:Name="GelShine"
                Margin="2,2,2,0"
                VerticalAlignment="top"
                RadiusX="6"
                RadiusY="6"
                Opacity="1"
                Stroke="transparent"
                Height="15px">
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <LinearGradientBrush.GradientStops>
                                <GradientStopCollection>
                                    <GradientStop Color="#ccffffff" 
                                        Offset="0" />
                                    <GradientStop Color="transparent"
                                        Offset="1" />
                                    </GradientStopCollection>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <ContentPresenter x:Name="GelButtonContent"
                            VerticalAlignment="center"
                            HorizontalAlignment="center"
                            Content="{TemplateBinding Content}" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Fill" TargetName="GelBackground">
                            <Setter.Value>
                                <RadialGradientBrush>
                                    <RadialGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Color="lime"
                                                    Offset="0" />
                                            <GradientStop Color="DarkGreen"
                                                    Offset="1" />
                                        </GradientStopCollection>
                                    </RadialGradientBrush.GradientStops>
                                </RadialGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Fill" TargetName="GelBackground">
                            <Setter.Value>
                                <RadialGradientBrush>
                                    <RadialGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Color="#ffcc00"
                                                    Offset="0" />
                                            <GradientStop Color="#cc9900"
                                                    Offset="1" />
                                        </GradientStopCollection>
                                    </RadialGradientBrush.GradientStops>
                                </RadialGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Foreground" Value="black " />
        </Trigger>
        <Trigger Property="IsPressed" Value="true">
            <Setter Property="Foreground" Value="black " />
        </Trigger>
    </Style.Triggers>
</Style>

I am planning to set the image's file destination in my code-behind (C#). For the output, the WPF button can both display the text and the image (placed in the right side of the text)

Any suggestions?

Solution 1

Your template includes a ContentPresenter, bound to the Content of the Button. So, you can simply set the image and/or text as the content of the button and they will go there.

<Button Style="{StaticResource ButtonStyler}">
    <StackPanel Orientation="Horizontal">
        <Image Source="..." />
        <TextBlock Text="..." />
    </StackPanel>
</Button>

Solution 2

just try this link. In this they created custom implementation of the button and a dependency property ImageSource so the you can use either from the code behind or from the XAML

Creating an image+text button with a control template?

Comments

[abramlimpin]

Is there a way I can set the image source in .cs (C#)?

[Timores]

Yes, Create an ImageSource instance, set its Source property to the image you want and set the Source property of Image to the ImageSource instance.