Question

我想创建一个没有边框的WPF按钮，带有背景图像并插入一个中心文本。所以我有这个：

         <Style TargetType="Button" x:Key="TransparentButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="Transparent">
                            <ContentPresenter/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

       <Button Style="{StaticResource TransparentButton}">
          <Button.Content>
             <StackPanel Orientation="Horizontal">
                <Image Source="./Resources/Images/bottone_indietro.png" />
                <Label content="Pippo"/>
             </StackPanel>
          </Button.Content>
       </Button>

它有效，但Text＆＃34; Pippo＆＃34;显示在图像右侧。可以使文本居中???

... Reguards

Answer 1

如果您想在图片上居中对齐文字，可以将这两个元素放在Grid而不是StackPanel

<Grid>
    <Image Source="./Resources/Images/bottone_indietro.png" />
    <Label Content="Pippo" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

StakcPanel将水平或垂直堆叠其子项，而Grid允许您将一个元素放在其他元素上。来自MSDN：

网格的子元素按它们在标记或代码中出现的顺序绘制。因此，当元素共享相同的坐标时，可以实现分层顺序（也称为z顺序）

您可以阅读有关WPF面板here

的更多信息

Answer 2

您可以使用HorizontalAlignment属性将文字居中，但它始终位于Image的右侧。您还需要删除Orientation上的StackPanel设置，以便文本显示在Image下方...试试这个：

<Button Style="{StaticResource TransparentButton}">
   <Button.Content>
      <StackPanel>
         <Image Source="./Resources/Images/bottone_indietro.png" />
         <TextBlock Text="Pippo" HorizontalAlignment="Center" />
      </StackPanel>
   </Button.Content>
</Button>

请注意，如果您希望文字在Image上方显示，那么您根本不应该使用StackPanel ...在这种情况下，您应该用Grid替换它。

如何插入没有边框的按钮，背景图像和文本

2 个答案: