[英]Multicontent on a wpf button ( Image + Text)
I would like to create a template for a button. 我想为按钮创建一个模板。 I would like to place an image (on the left) and text on this button. 我想在此按钮上放置图像(在左侧)和文本。
I tried to make a thing like that: 我试图做这样的事情:
<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>
Here is my code with a stackpanel added: 这是我添加了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>
Here is my call of the Template : 这是我对Template的调用:
<Grid Margin ="10,180,10,14">
<Button Template="{StaticResource BoutonImageEtTexte}" HorizontalAlignment="Left" Margin="13,0,0,0">
<Image Source="ToolBar_FicJoints.png" />
</Button>
</Grid>
Unfortunately, i only see the image, and , not the text ? 不幸的是,我只能看到图像,而看不到文本? Anyone have an idea please ? 有人有主意吗?
Thanks 谢谢
Maybe you can try something easier: 也许您可以尝试一些简单的事情:
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="yourimage.jpg" />
<TextBlock>Button content</TextBlock>
</StackPanel>
</Button>
You can just wrap the 2 elements in a single element like StackPanel
您可以将2个元素包装在单个元素中,例如StackPanel
Example: 例:
<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>
You'll find that creating a button with an image inside, will give you an ugly border, that should be avoided. 您会发现创建带有内部图像的按钮会给您一个丑陋的边框,应该避免这样做。 A workaround is to create an event for an image. 解决方法是为图像创建事件。
For instance, you can create an OnMouseOver
event that switches the button to, either a new image, text, or an image with text, or really anything you choose. 例如,您可以创建一个OnMouseOver
事件,该事件OnMouseOver
按钮切换到新图像,文本或包含文本的图像,或者实际上是您选择的任何按钮。
You can also create an OnClick
event that could trigger the image to do a task as if it was a button. 您还可以创建一个OnClick
事件,该事件可以触发图像执行任务,就好像它是按钮一样。
What I have done in a situation like this, was create an image that looks like a custom button, then create the same image, and modify it so that a border appeared around it. 在这种情况下,我要做的就是创建一个看起来像自定义按钮的图像,然后创建相同的图像,然后对其进行修改,以便在其周围出现边框。
I made an OnMouseOver to switch the images (so the bordered image appears), and an OnClick to do the function I required. 我做了一个OnMouseOver来切换图像(这样就出现了带边框的图像),并做了一个OnClick来完成我需要的功能。
You can then use this template for any other situation you have with custom buttons. 然后,您可以使用自定义按钮将此模板用于其他任何情况。
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.