wpf按钮上的多元内容（Image + Text）

我想为按钮创建模板。我想在这个按钮上放置一个图像（在左边）和文字。wpf按钮上的多元内容（Image + Text）

我试图让这样的事情：

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

Un幸运的是，我只看到图像，而不是文字？有人有想法吗？

感谢

来源

2013-02-28 Walter Fabio Simoni

只是包装“时间在一个StackPanel /格。 – 2013-02-28 21:44:43

你可以只包在一个单一的元素2个元素，如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>

来源

2013-02-28 21:47:35

非常感谢stackPanel的想法！但是，我可以使用ContentPresenter来指定该模板的调用中的文本和图像吗？我想在我的Page1.xaml中指定文本和图像？可能吗？我尝试过，但没有成功： – 2013-03-01 11:33:26

我编辑我的第一篇文章，我做了你的修改，但我只看到图像，而不是文本。你有想法吗？谢谢很多:) – 2013-03-01 13:00:00

你会发现，创建具有内部图像的按钮，将会给你是一个丑陋的边界，应该避免。解决方法是为图像创建事件。

例如，您可以创建一个OnMouseOver事件，将按钮切换为新图像，文本或带有文本的图像，或者您真正选择的任何东西。

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

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

我做了一个OnMouseOver切换图像（所以有边框的图像出现），和一个OnClick做我需要的功能。

然后，您可以使用此模板来处理您对自定义按钮的任何其他情况。

希望这会有所帮助！

来源

2013-02-28 21:48:22 plast1K

也许你可以尝试一些轻松：

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

来源

2013-03-01 08:32:28 Sonhja

wpf按钮上的多元内容（Image + Text）

回答

相关问题