Question

这是我的按钮代码：

<Button //namespaces
        x:Class="myProject.MyButton"
        FocusVisualStyle="{x:Null}"
        Foreground="White"
        Height="60"
        Width="200"
        HorizontalContentAlignment="Center"
        VerticalContentAlignment="Center"
        Padding="0 0 1 1"
        >
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border x:Name="border" CornerRadius="8">
                <Border.Background>
                    #006BB7
                </Border.Background>
                <DockPanel Margin="3">
                    <Image Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Height="30" Stretch="Fill" Margin="0 0 0 0"  HorizontalAlignment="Left"/>
                    <TextBlock Text="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}" FontSize="20" VerticalAlignment="Center" Padding="10,0,10,0" HorizontalAlignment="Left"/>
                    <Image Source="{DynamicResource ResourceKey=Bmp}" Height="30" Width="30" HorizontalAlignment="Right" Margin="0 0 10 0"></Image>
                </DockPanel>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

当我这样称呼时：

<ui:MyButton x:Name="btnGo" Tag="/Resources/Go.png" Content="Go" Command="{Binding Path=GoCommand}" Margin="20 0 0 0"/>

所有内容看起来都像我想看的那样：第一张图片没有显示，按钮的第三部分（第二张图片）右边对齐。

但是，这里：

<ui:MyButton Margin="10" Content="{Binding MyName}" Tag="{Binding Path}" HorizontalAlignment="Center" VerticalAlignment="Top">
    <Button.Resources>
         <BitmapImage x:Key="Bmp" UriSource="/Images/arrowRight.png"></BitmapImage>
    </Button.Resources>
 </ui:MyButton>

当我按下这样的按钮时，文本和第二张图像都没有显示出来。所有显示的都是第一张图像，它通过整个按钮的宽度进行拉伸。为什么会这样？我想让它表现得与另一个一样。

Answer 1

试试这个

在Change content of Image and of TextBlock when the Image and the TextBlock are in a button我们正在使用资源作为按钮，我们在这里用于<ui:MyButton>

<ui:MyButton Margin="10" Content="{Binding MyName}" Tag="{Binding Path}" HorizontalAlignment="Center" VerticalAlignment="Top">
    <ui:MyButton.Resources>
        <BitmapImage x:Key="Bmp" UriSource="/Images/arrowRight.png"></BitmapImage>
    </ui:MyButton.Resources>
</ui:MyButton>

按钮中的水平对齐

1 个答案: