CODEWITHSUNDEEP
c#wpf
holland
holland

Reputation: 2182

How to programmatically maintain aspect ratio of object in wpf

I programmatically add a Border with a certain width and height to a grid. However, I want to get either one of the following:

  1. Make the border keep aspect ratio and fill make it as big as possible inside the grid
  2. Make the border scale whenever the grid scales down or up (so not particularily the biggest possible, more like a percentage of the grid)

At the moment this is the situation when I resize my window:

Color borderColor = (Color)ColorConverter.ConvertFromString(BorderColor);
Color backgroundColor = (Color)ColorConverter.ConvertFromString(BackgroundColor);

Border border = new Border();
border.BorderThickness = new Thickness(BorderSize);
border.CornerRadius = new CornerRadius(TopLeftCornerRadius, TopRightCornerRadius, BottomRightCornerRadius, BottomLeftCornerRadius);
border.BorderBrush = (SolidColorBrush)(new BrushConverter().ConvertFrom(BorderColor));
border.Background = (SolidColorBrush)(new BrushConverter().ConvertFrom(BackgroundColor));

border.Width = Width;
border.Height = Height;

border.Margin = new Thickness(10);

previewgrid.Children.Add(border);

The normal situation:

enter image description here

The scaled situation:

enter image description here

So I would like it to resize properly and stay inside the white rectangle. By the way, the white grid has a margin as you can see ;-) Thanks in advance!

Upvotes: 1

Views: 2287

Answers (2)

Il Vic
Il Vic

Reputation: 5666

As lerthe61 suggested, just use a Viewbox with its Stretch property set to Uniform:

Color borderColor = (Color)ColorConverter.ConvertFromString(BorderColor);
Color backgroundColor = (Color)ColorConverter.ConvertFromString(BackgroundColor);

Border border = new Border();
border.BorderThickness = new Thickness(BorderSize);
border.CornerRadius = new CornerRadius(TopLeftCornerRadius, TopRightCornerRadius, BottomRightCornerRadius, BottomLeftCornerRadius);
border.BorderBrush = (SolidColorBrush)(new BrushConverter().ConvertFrom(BorderColor));
border.Background = (SolidColorBrush)(new BrushConverter().ConvertFrom(BackgroundColor));

border.Width = Width;
border.Height = Height;

border.Margin = new Thickness(10);

Viewbox viewBox = new Viewbox();
viewBox.Stretch = Stretch.Uniform;
viewBox.Child = border;

previewgrid.Children.Add(viewBox);

Please, note that this solution does not work if previewgrid is a Canvas. I hope it can help you.

Upvotes: 3

Mr.B
Mr.B

Reputation: 3787

The simplest way:

 <Grid Margin="50">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="50" />
    </Grid.ColumnDefinitions>
    <Border CornerRadius="50,0,0,50"
            Background="Green" />
    <Border CornerRadius="0"
            Grid.Column="1"
            Background="Green" />
    <Border CornerRadius="0,50,50,0"
            Grid.Column="2"
            Background="Green" />

</Grid>

By C#:

        myGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(50) });
        myGrid.ColumnDefinitions.Add(new ColumnDefinition());
        myGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(50) });

        Border b1 = new Border
        {
            Background = new SolidColorBrush(Colors.Blue),
            CornerRadius = new CornerRadius(100, 0, 0, 100)
        };

        Grid.SetColumn(b1, 0);

        Border b2 = new Border
        {
            Background = new SolidColorBrush(Colors.Blue),
        };
        Grid.SetColumn(b2, 1);
        Border b3 = new Border
        {
            Background = new SolidColorBrush(Colors.Blue),
            CornerRadius = new CornerRadius(0, 100, 100, 0),
        };
        Grid.SetColumn(b3, 2);

        myGrid.Children.Add(b1);
        myGrid.Children.Add(b2);
        myGrid.Children.Add(b3);

Normal:

enter image description here Resized:

enter image description here

Is it good enough for you?

Upvotes: 1

Related Questions