Question

所以我的项目上有几个按钮，我想对齐图像和文本，使它看起来像这样。（用Photoshop制作）

这就是我的样子

完成此任务的方法是什么？

XAML

<Button x:Name="BtnPlay" Width="Auto" Background="Transparent" BorderThickness="0" Height="35"
                Margin="-1,69,687,262" Style="{DynamicResource MenuButtonStyle}">
            <StackPanel Orientation="Horizontal" Width="89">
                <Image Source="Icons/newPower.png" Width="30" Height="27" />
                <TextBlock FontWeight="Bold" Foreground="White" Text="Play" VerticalAlignment="Center"
                           Margin="3,-1,3,-2" Height="18" Width="32" />
            </StackPanel>
        </Button>

        <Button x:Name="BtnSettings" Width="Auto" Background="Transparent" BorderThickness="0" Height="35"
                Margin="0,265,686,66" Style="{DynamicResource MenuButtonStyle}">
            <StackPanel Orientation="Horizontal">
                <Image Source="Icons/newWrench.png" Width="20" Height="20" />
                <TextBlock FontWeight="Bold" Foreground="White" Text="Settings" VerticalAlignment="Center"
                           Margin="3,-1,3,3" />
            </StackPanel>
        </Button>
        <Button x:Name="BtnUsers" Width="Auto" Background="Transparent" BorderThickness="0" Height="35"
                Margin="1,139,687,191" Style="{DynamicResource MenuButtonStyle}">
            <StackPanel Orientation="Horizontal">
                <Image Source="Icons/newUser.png" Width="20" Height="20" Margin="1,1,25,1" />
                <TextBlock FontWeight="Bold" Foreground="White" Text="Users" VerticalAlignment="Center"
                           Margin="3,-1,3,3" />
            </StackPanel>
        </Button>
        <Button x:Name="BtnPortforward" Width="Auto" Background="Transparent" BorderThickness="0" Height="35"
                Margin="1,104,687,226" Style="{DynamicResource MenuButtonStyle}">
            <StackPanel Orientation="Horizontal">
                <Image Source="Icons/newWorld.png" Width="20" Height="20" />
                <TextBlock FontWeight="Bold" FontSize="10" Foreground="White" Text="Portforward"
                           VerticalAlignment="Center" Margin="3,-1,3,3" />
            </StackPanel>
        </Button>

        <Button Name="BtnUpdate" Width="Auto" Background="Transparent" BorderThickness="0" Height="35"
                Margin="-1,331,686,0" Style="{DynamicResource MenuButtonStyle}">
            <StackPanel Orientation="Horizontal">
                <Image Source="Icons/newUpdate.png" Width="20" Height="20" />
                <TextBlock FontWeight="Bold" Foreground="White" Text="Update" VerticalAlignment="Center"
                           Margin="3,-1,3,3" />
            </StackPanel>
        </Button>

        <Label Content="Up to date!" Foreground="White" HorizontalAlignment="Left" Margin="10,305,0,0"
               VerticalAlignment="Top" />

Answer 1

Grid比StackPanel更强大，适用于更细粒度和更复杂的设计/布局

<强>〔实施例

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="28" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Content="Name:"/>
    <Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/>
    <Label Grid.Row="2" Grid.Column="0" Content="Comment:"/>
    <TextBox Grid.Column="1" Grid.Row="0" Margin="3" />
    <TextBox Grid.Column="1" Grid.Row="1" Margin="3" />
    <TextBox Grid.Column="1" Grid.Row="2" Margin="3" />
    <Button Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" MinWidth="80" Margin="3" Content="Send"  />
</Grid>

Answer 2

您可以使用usercontrol。

<UserControl x:Class="StackoverflowTest.UserControl1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:StackoverflowTest"
         mc:Ignorable="d" 
         d:DesignHeight="100" d:DesignWidth="300"
         Name="TestBtn">
<Button>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <Image Grid.Column="0" Source="{Binding Path=Source,ElementName=TestBtn}"  />
        <TextBlock Grid.Column="1" Text="{Binding Path=CustomText,ElementName=TestBtn}" Background="Aqua" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Button>

Code in usercontrol.cs(Add dependencyproperty)

    public UserControl1()
    {
        InitializeComponent();
    }

    public ImageSource Source
    {
        get { return (ImageSource)GetValue(SourceProperty); }
        set { SetValue(SourceProperty, value); }
    }

    public string CustomText
    {
        get { return (string)GetValue(textProperty); }
        set { SetValue(textProperty, value); }
    }

    public static readonly DependencyProperty SourceProperty =
    DependencyProperty.Register("Source", typeof(ImageSource), typeof(UserControl1));


    public static readonly DependencyProperty textProperty =
    DependencyProperty.Register("CustomText", typeof(string), typeof(UserControl1));
}

您可以轻松使用此用户控件。

<Grid>
    <local:UserControl1 x:Name="PlayBtn" Width="100" Height="30" Source="play.png" CustomText="Play" />
</Grid>

如何对齐图像和文本？ XAML

2 个答案: