WPF Stretching

[RockiLocky]

Hey guys,

 

So I am just currently trying out some stretching meaning if I make the window bigger the rest of my Buttons and so on also go bigger. I tried to use the FrameworkElement.VerticalAlignment and Framework.HorizontalAlignment. But that doesn't seem to help. Could you guys maybe help me out?

 

[spoiler = Code]

<Window x:Class="TicTacToe.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"        xmlns:local="clr-namespace:TicTacToe"        mc:Ignorable="d"        Title="MainWindow" Height="351" Width="508.5">    <Grid Height="320" Width="500" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">        <Grid.RowDefinitions>            <RowDefinition Height="20*"/>            <RowDefinition Height="100*"/>            <RowDefinition Height="100*"/>            <RowDefinition Height="100*"/>        </Grid.RowDefinitions>        <Grid.ColumnDefinitions>            <ColumnDefinition Width="100*"/>            <ColumnDefinition Width="100*"/>            <ColumnDefinition Width="100*"/>            <ColumnDefinition Width="200*"/>        </Grid.ColumnDefinitions>        <Menu Name="Menu" HorizontalAlignment="Left" Height="20" VerticalAlignment="Top" Width="90">            <MenuItem Header="File" Height="20">                <MenuItem Header="Close"/>            </MenuItem>            <MenuItem Header="Enemy" Width="58"/>        </Menu>        <Label Name="label" Content="Label" Grid.Column="3"   HorizontalAlignment="Left" Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Top"/>        <Border BorderBrush="Black" BorderThickness="0 0 1 1" HorizontalAlignment="Stretch" Height="100" Grid.Row="1" VerticalAlignment="Stretch" Width="100"/>        <Border BorderBrush="Black" BorderThickness="0 0 1 1" HorizontalAlignment="Stretch" Height="100" Grid.Row="2" VerticalAlignment="Stretch" Width="100"/>        <Border BorderBrush="Black" BorderThickness="0 0 1 0" HorizontalAlignment="Stretch" Height="100" Grid.Row="3" VerticalAlignment="Stretch" Width="100"/>        <Border BorderBrush="Black" BorderThickness="0 0 1 1" HorizontalAlignment="Stretch" Height="100" Grid.Row="1" VerticalAlignment="Stretch" Width="100" Grid.Column="1"/>        <Border BorderBrush="Black" BorderThickness="0 0 1 1" HorizontalAlignment="Stretch" Height="100" Grid.Row="2" VerticalAlignment="Stretch" Width="100" Grid.Column="1"/>        <Border BorderBrush="Black" BorderThickness="0 0 1 0" HorizontalAlignment="Stretch" Height="100" Grid.Row="3" VerticalAlignment="Stretch" Width="100" Grid.Column="1"/>        <Border BorderBrush="Black" BorderThickness="0 0 0 1" HorizontalAlignment="Stretch" Height="100" Grid.Row="1" VerticalAlignment="Stretch" Width="100" Grid.Column="2"/>        <Border BorderBrush="Black" BorderThickness="0 0 0 1" HorizontalAlignment="Stretch" Height="100" Grid.Row="2" VerticalAlignment="Stretch" Width="100" Grid.Column="2"/>        <Button Name="BTL" Opacity="0" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="0" VerticalAlignment="Top" Width="100" BorderBrush="White" Background="White" Height="100" ClickMode="Press">            <Image Height="100" Width="100" Margin="-2 -2 0 0"/>        </Button>        <Button Name="BML" Opacity="0" HorizontalAlignment="Left" Grid.Row="2" Grid.Column="0" VerticalAlignment="Top" Width="100" BorderBrush="White" Background="White" Height="100" ClickMode="Press">            <Image Height="100" Width="100" Margin="-2 -2 0 0" />        </Button>        <Button Name="BBL" Opacity="0" HorizontalAlignment="Left" Grid.Row="3" Grid.Column="0" VerticalAlignment="Top" Width="100" BorderBrush="White" Background="White" Height="100" ClickMode="Press">            <Image Height="100" Width="100" Margin="-2 -2 0 0" />        </Button>        <Button Name="BTM" Opacity="0" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="1" VerticalAlignment="Top" Width="100" BorderBrush="White" Background="White" Height="100" ClickMode="Press">            <Image Height="100" Width="100" Margin="-2 -2 0 0" />        </Button>        <Button Name="BMM" Opacity="0" HorizontalAlignment="Left" Grid.Row="2" Grid.Column="1" VerticalAlignment="Top" Width="100" BorderBrush="White" Background="White" Height="100" ClickMode="Press">            <Image Height="100" Width="100" Margin="-2 -2 0 0" />        </Button>        <Button Name="BBM" Opacity="0" HorizontalAlignment="Left" Grid.Row="3" Grid.Column="1" VerticalAlignment="Top" Width="100" BorderBrush="White" Background="White" Height="100" ClickMode="Press">            <Image Height="100" Width="100" Margin="-2 -2 0 0" />        </Button>        <Button Name="BTR" Opacity="0" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="2" VerticalAlignment="Top" Width="100" BorderBrush="White" Background="White" Height="100" ClickMode="Press">            <Image Height="100" Width="100" Margin="-2 -2 0 0" />        </Button>        <Button Name="BMR" Opacity="0" HorizontalAlignment="Left" Grid.Row="2" Grid.Column="2" VerticalAlignment="Top" Width="100" BorderBrush="White" Background="White" Height="100" ClickMode="Press">            <Image Height="100" Width="100" Margin="-2 -2 0 0" />        </Button>        <Button Name="BBR" Opacity="0" HorizontalAlignment="Left" Grid.Row="3" Grid.Column="2" VerticalAlignment="Top" Width="100" BorderBrush="White" Background="White" Height="100" ClickMode="Press">            <Image Height="100" Width="100" Margin="-2 -2 0 0" />        </Button>    </Grid></Window> 

 

Nice Greets,

RockiLocky

[Mug]

why are you stretching tictactoe?

[RockiLocky]

why are you stretching tictactoe?

Its not only for tictactoe, it is just for practice so I know how to do it for projects in the future. I just wanted to do something simple and do some learning while at it.

[lubblig]

So what you want to do is use Auto for both width and height instead of telling them to be a permanent value. The way you actually set the size is to use margins. So you're going to have set each buttons margins so that it works.
 
Margins work like this: MarginToTheLeft,MarginToTheTop,MarginToTheRight,MarginToTheBottom. So if you want to set margins to a button where 51 is to the left, 52 is to the right, 53 is to the top and 54 is to the bottom.
 
It'll look like this:
 

 

 

If you want the margin to be, lets say 50 on each side, you can simply set Margin="50" and you're done.

 

The last thing you'll need is what you are already taking about, and that is to set the HorizontalAlignment and VerticalAlignment to "Stretch".

 

This should do the trick and you can make your controls as I show in the picture above. So the "hard part" is to set the margins correctly to make them not overlap etc.

 

EDIT:

 

Forgot to mention that this way, the controls resize according to the form

[RockiLocky]

So what you want to do is use Auto for both width and height instead of telling them to be a permanent value. The way you actually set the size is to use margins. So you're going to have set each buttons margins so that it works.

 

Margins work like this: MarginToTheLeft,MarginToTheTop,MarginToTheRight,MarginToTheBottom. So if you want to set margins to a button where 51 is to the left, 52 is to the right, 53 is to the top and 54 is to the bottom.

 

It'll look like this:

 

 

 

If you want the margin to be, lets say 50 on each side, you can simply set Margin="50" and you're done.

 

The last thing you'll need is what you are already taking about, and that is to set the HorizontalAlignment and VerticalAlignment to "Stretch".

 

This should do the trick and you can make your controls as I show in the picture above. So the "hard part" is to set the margins correctly to make them not overlap etc.

 

EDIT:

 

Forgot to mention that this way, the controls resize according to the form

Thanks alot man will try it out when I am home. The only problem I got now is that I do not actually have margins,because the Margins are 0 0 0 0 for all the buttons. The only thing I could set margins to is the Grid which is attached to the window. Another thing would be I am using Row's and Column's meaning they would scale according to the Grid, because I added the *. Doesn't that mean that the Row's and Column's should already scale accordingly, because they do not.

 

 

 

Edit:

I just found mostly everything works now this way. The only problem I have now If I set do the same thing I did to all now to the Images they disapear meaning width and height = 0. You know why and you know what I could do against that?