WPF / C#:创建按钮样式:文本+图像

时间:2010-09-03 21:34:34

标签: c# wpf button styles

我只是想问一下如何将我的图像(动态)放入以下代码中:

<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>

我打算在我的代码隐藏(C#)中设置图像的文件目的地。对于输出,WPF按钮可以显示文本和图像(放在文本的右侧)

有什么建议吗?

2 个答案:

答案 0 :(得分:4)

您的模板包含一个ContentPresenter,绑定到Button的内容。因此,您只需将图像和/或文本设置为按钮的内容,它们就会到达那里。

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

答案 1 :(得分:1)

试试此链接。在这里,他们创建了按钮的自定义实现和依赖属性ImageSource,因此您可以使用后面的代码或来自XAML

Creating an image+text button with a control template?