使用图像和文本创建 wpf 按钮

Posted 2023-02-22

【中文标题】使用图像和文本创建 wpf 按钮

【英文标题】：Create wpf button with an image and a text

【发布时间】：2013-02-16 09:03:54

【问题描述】：

我想创建一个按钮模板，以便在按钮中显示图像和标签。 我想在按钮上使用水平堆栈面板。

我没有成功显示标签。

这是我的模板：

<ControlTemplate TargetType="x:Type Button" x:Key="BoutonImageEtTexte">
<Button Grid.Column="2" BorderBrush="Transparent" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="27" >
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <Border CornerRadius="3">
                <ContentPresenter/>
                <Border.Style>
                    <Style TargetType="x:Type Border">
                        <Setter Property="Background" Value="#58585a" />
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="StaticResource DegradeCouleurTheme" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
            </Border>
            <Label>
                <Label.Content>Fichiers joints</Label.Content>
                <Label.Foreground>white</Label.Foreground>
                <Label.VerticalAlignment>center</Label.VerticalAlignment>
                <Label.HorizontalAlignment>center</Label.HorizontalAlignment>
            </Label>
        </StackPanel>
    </Button.Content>
    <Button.Style>
        <Style TargetType="x:Type Button" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="x:Type Button" >
                        <ContentPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

这是我对这个模板的调用：

<Grid Margin ="10,180,10,14">
            <Button Template="StaticResource BoutonImageEtTexte" HorizontalAlignment="Left" Margin="13,0,0,0"> 
                <Image Source="ToolBar_FicJoints.png" />
            </Button>
        </Grid> 

这是另一种使用文本框而不是标签的方法

    <ControlTemplate TargetType="x:Type Button" x:Key="BoutonImageEtTexte">
    <Button Grid.Column="2" BorderBrush="Transparent" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="27" >
        <Button.Content>
            <StackPanel Orientation="Horizontal">
                <Border CornerRadius="3">
                    <ContentPresenter/>
                    <Border.Style>
                        <Style TargetType="x:Type Border">
                            <Setter Property="Background" Value="#58585a" />
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="StaticResource DegradeCouleurTheme" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                </Border>
                    <TextBlock Text="LabelText" />
                </StackPanel>
        </Button.Content>
        <Button.Style>
            <Style TargetType="x:Type Button" >
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="x:Type Button" >
                            <ContentPresenter />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Button.Style>
    </Button>
</ControlTemplate>

我的问题是我只看到我的图像，而不是模板中指定的标签。 任何人都可以帮助我吗？

非常感谢:)

【问题讨论】：

你的概念完全错误。如果你想创建一个按钮的控件模板来接收多个项目作为内容，你必须创建一个额外的依赖属性。

你能给我举个例子吗？

这似乎是个好帖子...blogs.msdn.com/b/knom/archive/2007/10/31/…

这个链接不错！谢谢 ！但是，它使用 c# 代码，而不是完整的 xaml :-(

您的帖子中没有任何地方指定仅使用 xaml 并且您使用 c# 标记了此问题，因此您不应评论该链接不是您想要的。创建依赖属性来处理图像源和文本内容是能够使用 MVVM 进行数据绑定的首选方式。

【参考方案1】：

TextBlock 比标签更适合您的需求。如果不使用额外的标签功能（如目标、对象内容），请坚持使用好的 'ole TextBlock。

如果您想禁用所有按钮样式并且按钮中只有一个图像和标签（注意，这会使鼠标悬停/鼠标按下效果无效，但您可以在触发器中提供逻辑）：

<ControlTemplate TargetType="x:Type Button" x:Key="SimpleButton">
    <ContentPresenter/>
</ControlTemplate>

用法：

<Button Template="StaticResource SimpleButton"> 
    <StackPanel Orientation="Horizontal">
        <Image Source="ToolBar_FicJoints.png" />
        <TextBlock Text="LabelText" />
    </StackPanel>
</Button>

如果您只想要普通样式按钮中的 Image/TextBlock，那就更简单了：

<Button> 
    <StackPanel Orientation="Horizontal">
        <Image Source="ToolBar_FicJoints.png" />
        <TextBlock Text="Fichiers joints" />
    </StackPanel>
</Button>

【讨论】：

我试过了，但是我的文本框显示在按钮之外，你知道吗？我用 TxtBoxMedthod 编辑了我的第一篇文章 :) 非常感谢！

【参考方案2】：

如下使用画布。

<Button Height="50" Width="150" >
                        <Button.Template>
                            <ControlTemplate>
                                <Canvas>
                                    <Image Source="./Images/Cancel.png"/>
                                    <TextBlock Canvas.Left="22" Canvas.Top="8" Text="Cancel" FontFamily="Arial" FontSize="18"/>
                                </Canvas>
                            </ControlTemplate>
                        </Button.Template>
                     </Button>

您可以根据需要调整Canvas.Left 和Canvas.Top。我希望这个对您有所帮助，因为它将在图像顶部显示 Textblock。