Dynamically resize page and attributes C# Visual Studio 2015

Question

I am trying to make an app in Visual Studio 2015. I am a sort of newbie, so I don't know much. As the title suggests, I am having trouble making the buttons and the page items resize to the size of the frame. Here is my XAML code:

<Page
x:Class="Rodojo_start.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Rodojo_start"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <RelativePanel>
        <Button Width="320" Height="45" Name="Manage_btn" Click="Manage_btn_Click" FontFamily="Segoe MDL2 Assets" Content="&#xE136;" Margin="0,0,0,0"></Button>
    </RelativePanel>
    <RelativePanel>
        <Button Width="320" Height="45" Name="Sale_btn" Click="Sale_btn_Click" FontFamily="Segoe MDL2 Assets" Content="&#xE125;" Margin="320,0,0,0"></Button>
    </RelativePanel>
    <RelativePanel>
        <Button Width="320" Height="45" Name="settingsbtn" Click="settingsbtn_Click" FontFamily="Segoe MDL2 Assets" Content="&#xE115;" Margin="640,0,0,0"></Button>
    </RelativePanel>
    <RelativePanel>
        <Button Width="320" Height="45" Name="aboutbtn" Click="aboutbtn_Click" FontFamily="Segoe MDL2 Assets" Content="&#xE11B;" Margin="960,0,0,0"></Button>
    </RelativePanel>
</Grid>

Right now, The buttons are all 320 pixels wide. I want them to resize themselves, but still keep them at the top of the screen. I tried the "ViewBox" part. That made it resize, but put the buttons in the middle of the screen.

Any help would be greatly appreciated.

Thanks.

Containers control layout for child controls. I don't know what you want/what you're getting (I know WPF flavored xaml, haven't UWP'd), but it looks weird wrapping all your buttons with RelativePanels, and the fact that you define rows and columns but you aren't setting Grid.Row="..." on any child controls. — , Aug 04 '16 at 17:15
Dunno, that's not a WPF control. Why do it? According to the docs, you put multiple controls in the RelativePanel and then position them ... **relative** to each other. Why do it when you only have one control? Try this--set up your grid columns/rows the way you think it should look (like, "I need a tic-tac-toe layout--3 even rows, 3 even columns), then pull your buttons out of their RelativePanels and tell them where in the grid each lives (e.g., `Grid.Row="2" Grid.Column="2"` for bottom left of the tic-tac-toe field). — , Aug 04 '16 at 17:23
ok, I'll try it. How do you set up the grid? Is it then and ? — rajap, Aug 04 '16 at 17:24
If you [edit] and add images of what you have and what you want, it would help answer your question. Actually, just do that in a comment and @will me, and I'll add them to your question. — , Aug 04 '16 at 17:25
Both images are in this folder:1drv.ms/f/s!Ai265Pssu5OtigNF0gudmPqzTqer. The one with the XAML text is what I have. The one with the Design Editor is what I want. I want it to resize itself as well. @will — rajap, Aug 04 '16 at 17:49

score 0 · Accepted Answer · edited May 23 '17 at 12:08

I personally think that the ViewBox solution is quite confusing. It can be difficult to understand how the controls are going to be resized.

In WPF, the Grid, DockPanel and UniformGrid can automatically resize their contents. You have started to use a Grid to define your layout..well, just keep going! In order for a grid to resize their contents, it will depend on how you set the Height and Width of its rows and columns.

In your case:

<Grid.RowDefinitions>
  <RowDefinition Height="auto"></RowDefinition> 
  <RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>

Setting the Height or Width to "Auto", the grid will be resized to the size of their contents. Setting it to "*", the grid will be resized to the amount of space left available. Setting some row with a specific Height like "45", will keep the Row at 45 no matter what.

You can also use MinHeight/MaxHeight and MinWidth/MaxWidth to define rows and columns sizes, which will get the grid resized, but respecting the max or min dimensions.

Therefore, my suggestion to you: Remove the RelativePanels, and define a layout grid. If you want to automatically resize the contents, don't define specific sizes, but use "Auto", "*", MaxHeight, MinHeight, MaxWidth, MinWidth instead. Even your buttons. If you set your button to have a Width of 45, your button will keep a width of 45, when resized!

Hope I have helped, Here's another source: How to make all controls resize accordingly proportionally when window is maximized?

score 0 · Answer 2 · answered Aug 04 '16 at 18:05

OK, I figured it out from everything above. Here is my end code:

<Page
    x:Class="Rodojo_start.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Rodojo_start"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Name="Manage_btn" Click="Manage_btn_Click" FontFamily="Segoe MDL2 Assets" Content="&#xE136;" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
        <Button Name="Sale_btn" Click="Sale_btn_Click" FontFamily="Segoe MDL2 Assets" Content="&#xE125;" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1"/>
        <Button Name="settingsbtn" Click="settingsbtn_Click" FontFamily="Segoe MDL2 Assets" Content="&#xE115;" Margin="0" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
        <Button Name="aboutbtn" Click="aboutbtn_Click" FontFamily="Segoe MDL2 Assets" Content="&#xE11B;" Margin="0" Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
    </Grid>
</Page>

It works exactly how I wanted it to work. Once again, thanks for everything everyone!

Dynamically resize page and attributes C# Visual Studio 2015

2 Answers2