所以我的项目上有几个按钮,我想对齐图像和文本,使它看起来像这样。 (用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" />
答案 0 :(得分: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>
答案 1 :(得分:0)
您可以使用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>