以编程方式将图像在按钮内右对齐WPF

Question

I'm trying to align a image inside a button to the right. however it does not seem to do what i want it to do. i have been trying for several hours now, so i think it is time to ask here. this is my code atm.

public class DirectoryButton : Button
{
    public DirectoryButton(string name, string content)
    {
        Name = name.Replace(" ", "");
        //Content = new BitmapImage(new Uri("../Resources/folder-icon.png", UriKind.Relative)) + content;
        //Content = new BitmapImage(new Uri("../Resources/folder-icon.png", UriKind.Relative));
        var img = new BitmapImage(new Uri("../Resources/folder-icon.png", UriKind.Relative));

        var sp = new UniformGrid
        {
            HorizontalAlignment = HorizontalAlignment.Stretch,
            VerticalAlignment = VerticalAlignment.Stretch,
            Columns = 3,
            Rows = 1
        };
        sp.Children.Add(new Label());
        sp.Children.Add(new Label { Content = content, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center });
        sp.Children.Add(new Image { Source = img, HorizontalAlignment = HorizontalAlignment.Right, VerticalAlignment = VerticalAlignment.Center});
        //sp.Orientation = Orientation.Horizontal;
        Content = sp;
        //Content = content;
        Margin = new Thickness(0, 5, 0, 5);
        Height = 65;
        Width = 350;
        FontWeight = FontWeights.Bold;
        Foreground = new SolidColorBrush(Colors.Black);
        Background = new SolidColorBrush(Colors.Gray);
        HorizontalContentAlignment = HorizontalAlignment.Center;
        VerticalAlignment = VerticalAlignment.Center;
        Visibility = Visibility.Visible;
    }
}

button Image

this makes the image in the button appear but it is not to the right. i cannot really do anything in the xaml since everything is created programmaticaly.

Regards,

Bjorn

Answer 1

Set the HorizontalContentAlignment to Stretch :

public class DirectoryButton : Button
{
    public DirectoryButton(string name, string content)
    {
        Name = name.Replace(" ", "");
        //Content = new BitmapImage(new Uri("../Resources/folder-icon.png", UriKind.Relative)) + content;
        //Content = new BitmapImage(new Uri("../Resources/folder-icon.png", UriKind.Relative));
        var img = new BitmapImage(new Uri("../Resources/folder-icon.png", UriKind.Relative));

        var sp = new UniformGrid
        {
            HorizontalAlignment = HorizontalAlignment.Stretch,
            VerticalAlignment = VerticalAlignment.Stretch,
            Columns = 3,
            Rows = 1
        };
        sp.Children.Add(new Label());
        sp.Children.Add(new Label { Content = content, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center });
        sp.Children.Add(new Image { Source = img, HorizontalAlignment = HorizontalAlignment.Right, VerticalAlignment = VerticalAlignment.Center });
        //sp.Orientation = Orientation.Horizontal;
        Content = sp;
        //Content = content;
        Margin = new Thickness(0, 5, 0, 5);
        Height = 65;
        Width = 350;
        FontWeight = FontWeights.Bold;
        Foreground = new SolidColorBrush(Colors.Black);
        Background = new SolidColorBrush(Colors.Gray);
        HorizontalContentAlignment = HorizontalAlignment.Stretch; //<--
        VerticalAlignment = VerticalAlignment.Center;
        Visibility = Visibility.Visible;
    }

This should make the UniformGrid stretch to fill the entire Button and the Image will then end up to the right.

Answer 2

As I tried to explain in the comments above.

The code you've provide us works like it should.

You create an UniformGrid with three cells and add three childs to the grid. Each cell of the grid will have the same size.

Your empty label will got to the left one. The next label to the center. You will add your image to the right cell and set HorizontalAlignment = HorizontalAlignment.Right . This will align your image within his cell at the right edge. And also to the right edge of your grid.

Now you add your UniformGrid as Content to your button. With the following line of code

HorizontalContentAlignment = HorizontalAlignment.Center; 

you will center your grid within the button. That's why your image is not at the right edge of your button.

---

As already suggested in my comment you can set

HorizontalContentAlignment = HorizontalAlignment.Right; 

and your Image and the whole grid will move to the right edge, but this means also that your centered Label will also move to the right.

---

If you want to let the second Label stay within the center of the Button take the Answer provided by mm8 and use HorizontalContentAlignment = HorizontalAlignment.Stretch;