How do I make make my buttons to resize when the size of the screen changes?

Question

0.00/5 (No votes)

See more:

Hi, guys.
I have Grid with "star sizing" and expected my buttons to grow or shrink when displaying on bigger or larger screen. I tried to find solution to this but failed.
I thougt that a star in row and column definition sorts everything out but not.
Here is the sample of my code:

<Grid removed="#FF075B16" >
     <Grid.RowDefinitions>
         <RowDefinition Height="*" />
         <RowDefinition Height="*" />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*" />
         <ColumnDefinition Width="20"/>
         <ColumnDefinition Width="*" />
     </Grid.ColumnDefinitions>
     <Button x:Name="vitaminsButton" HorizontalAlignment="Left"    Margin="200,140,0,0" VerticalAlignment="Top"
             Height="178" Width="405" Content="Button1" FontSize="24">
         <Button.Background>
             <ImageBrush ImageSource="Assets/001 (www.cute-pictures.blogspot.com).jpg" Stretch="UniformToFill" />
         </Button.Background>
     </Button>
     <Button HorizontalAlignment="Right" Margin="0,140,200,0" VerticalAlignment="Top" Grid.Column="2"
             Height="178" Width="405" Content="Button2" FontSize="24" x:Name="mineralsButton">
         <Button.Background>
             <ImageBrush ImageSource="Assets/1280px-ARS_copper_rich_foods.jpg" Stretch="UniformToFill" />
         </Button.Background>
     </Button>
     <Button HorizontalAlignment="Left" Margin="200,0,0,140" VerticalAlignment="Bottom" Grid.Row="1" x:Name="BrowseAllButton"
             Height="178" Width="405" Content="Button3" FontSize="24">
         <Button.Background>
             <ImageBrush ImageSource="Assets/freshvegetablesinbasket.jpg" Stretch="UniformToFill" />
         </Button.Background>
     </Button>
     <SearchBox Grid.Column="2" HorizontalAlignment="Left" Margin="150,179,0,0" Grid.Row="1"
                VerticalAlignment="Top" Width="357"  PlaceholderText="Search"
                />
 </Grid>

Posted 11-Mar-15 21:30pm

Reatellino

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

vivek.khatri · Accepted Answer · 2015-03-11T22:24:00

1.place your buttons in separate cells. That means create a cell for each control(button).

2.Then set your control/button's "HorizontalAlignment" and "VerticalAlignment" = "Stretch".

3.Done. Whenever the size of the cell will grow, the button's size will automatically grow.

For example : Window's size is 600x400

HTML

<grid horizontalalignment="Stretch" verticalalignment="Stretch">
    <grid.rowdefinition>
        <rowdefiniton height="*" />
        <rowdefiniton height="*" />
    </grid.rowdefinition>
    <grid.columndefinition>
        <columndefinition width="*" />
        <columndefinition width="*" />
    </grid.columndefinition>

    <button grid.row="0" grid.column="0" horizontalalignment="Stretch" verticalalignment="Stretch" />
    <Button Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <Button Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <Button Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</grid>

This will stretch your grid to available width and height.

So, now your grid's size is 600x400.

Now You have 4 cells, all having equal sizes.
That means each cell's size is 300x200.

And because we have set each button's alignment property, the buttons will fill to the cell's size.