C# wpf按钮上的多内容（图像+文本）

我想为按钮创建一个模板。我想在左边放置一个图像，在这个按钮上放置一个文本

我试着做这样一件事：

<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>
            <Label>
                <Label.Content>Fichiers joints</Label.Content>
                <Label.Foreground>white</Label.Foreground>
                <Label.VerticalAlignment>center</Label.VerticalAlignment>
                <Label.HorizontalAlignment>center</Label.HorizontalAlignment>
            </Label>
            <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>
    </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>

这是我添加了stackpanel的代码：

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

不幸的是，我只看到图像，而不是文本？ 有人有主意吗

---

谢谢

您只需将这两个元素包装在一个元素中，就像StackPanel一样

例如：

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

---

您只需将这两个元素包装在一个元素中，如StackPanel

例如：

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

---

你会发现，创建一个里面有图像的按钮会给你一个丑陋的边框，这是应该避免的。解决方法是为图像创建事件

例如，您可以创建一个OnMouseOver事件，将按钮切换到新图像、文本或带有文本的图像，或者您选择的任何内容

您还可以创建一个OnClick事件，该事件可以触发映像执行任务，就像它是一个按钮一样

在这种情况下，我所做的是创建一个看起来像自定义按钮的图像，然后创建相同的图像，并对其进行修改，使其周围出现边框

我制作了一个OnMouseOver来切换图像，以便显示带边框的图像，并单击OnClick来完成我所需的功能

然后，您可以将此模板用于自定义按钮的任何其他情况

---

希望这有帮助

你会发现，创建一个带有图像的按钮会给你一个难看的边框，这是应该避免的。解决方法是为图像创建事件

例如，您可以创建一个OnMouseOver事件，将按钮切换到新图像、文本或带有文本的图像，或者您选择的任何内容

您还可以创建一个OnClick事件，该事件可以触发映像执行任务，就像它是一个按钮一样

在这种情况下，我所做的是创建一个看起来像自定义按钮的图像，然后创建相同的图像，并对其进行修改，使其周围出现边框

我制作了一个OnMouseOver来切换图像，以便显示带边框的图像，并单击OnClick来完成我所需的功能

然后，您可以将此模板用于自定义按钮的任何其他情况

---

希望这有帮助

也许你可以试试更简单的：

<Button>
<StackPanel Orientation="Horizontal">
    <Image Source="yourimage.jpg" />
    <TextBlock>Button content</TextBlock>
</StackPanel>
</Button>

---

也许你可以尝试更简单的方法：

<Button>
<StackPanel Orientation="Horizontal">
    <Image Source="yourimage.jpg" />
    <TextBlock>Button content</TextBlock>
</StackPanel>
</Button>

---

用StackPanel/网格把它们包起来。用StackPanel/网格把它们包起来。非常感谢StackPanel的创意！但是，我可以使用ContentPresenter来指定此模板调用中的文本和图像吗？我想在我的Page1.xaml中指定文本和图像？可能吗？我试过了，但是没有成功：我编辑了我的第一篇文章。我做了你的修改，但我只看到图像，而不是文本。你有什么想法吗？非常感谢：非常感谢stackPanel的想法！但是，我可以使用ContentPresenter来指定此模板调用中的文本和图像吗？我想在我的Page1.xaml中指定文本和图像？可能吗？我试过了，但是没有成功：我编辑了我的第一篇文章。我做了你的修改，但我只看到图像，而不是文本。你有什么想法吗？谢谢：