How do I align my images and my text? XAML - Photoshop

TheHappyGuy
February 12, 2018
214 views
0 votes
2 Answers

So I have a few buttons on my project and I would like to align the images and the text so that it looks something like this. (Made in Photoshop)

And this is what mine looks like

What would be the propper way to accomplish this?

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

Tags: .net c#wpf xaml

Answers

Grid is more powerful then StackPanel and suited for more granular and complex designs/layouts

Exmaple

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

You can use 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));
}

And you can easy to use this usercontrol.

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

Please signup or login to give your own answer.

Click here to cancel reply.

How do I align my images and my text? XAML – Photoshop

Answers