I have a rectangle that is expanding just fine horizontally, but not vertically:
<Grid x:Name="MainDisplay" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="10" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Viewbox MinWidth="400" MinHeight="400" x:Name="Scenario4ImageContainer" Stretch="Fill" Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch">
<Rectangle MinWidth="400" MinHeight="400" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Blue"/>
</Viewbox>
When I set the MinHeight property to 700 it takes up all the screen space, but I want to take up however much room it can get.
Also this outer grid sits inside of this parent grid:
<Grid x:Name="Output" Background="#1D1D1D" Margin="0,2,0,-2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
I've tried out the XAML you posted and the Rectangle is expanding just fine. The only thing limiting it is the outer Grid which defines two rows of equal height. Try making the second row narrower and you'll see the Rectangle expand:
<Grid x:Name="Output" Background="#1D1D1D" Margin="0,2,0,-2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid x:Name="MainDisplay" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="10" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Viewbox MinWidth="400" MinHeight="400" x:Name="Scenario4ImageContainer" Stretch="Fill" Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch">
<Rectangle MinWidth="400" MinHeight="400" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Blue"/>
</Viewbox>
</Grid>
</Grid>
Related
I would like to know if it is possible to collapse a row in a grid ?
I already collapsed the controls inside my row (using Visibility = "Collapsed" + Height = "Auto").
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="Test 1"/>
<ProgressBar Grid.Column="1" Value="90"/>
<Label Content="Test 2" Grid.Row="1" Visibility="Collapsed"/>
<ProgressBar Grid.Column="1" Grid.Row="1" Value="50" Visibility="Collapsed"/>
<Label Content="Test 3" Grid.Row="2"/>
<ProgressBar Grid.Column="1" Grid.Row="2" Value="20"/>
</Grid>
But I would like to collapse all the row, whitout doing it for each control in the row, like that :
<RowDefinition Height="Auto" Visibility="Collapsed"/>
Is it possible ? Or should I use something other than a grid ?
Thanks.
My UI elements' layout (nest relation) is:
toolbarGrid -> toolbarCanvas -> toolbarPanel -> some buttons
My purpose is to make animation of those buttons.
The issue is that I use Debug.Write() to monitor the Width and ActualWidth parameters of the UI elements. And I found that when App screen size is changed, only toolbarGrid size is changed accordingly. While the other UI elements' sizes are not changed at all, although I use Binding method to bind their Width and ActualWidth to toolbarGrid.
So how can I set their Width and ActualWidth so that they could change according to App screen's real size?
toolbarPanel width = 1920, actualWidth = 1920
toolbarGrid width = NaN, actualWidth = 1034
toolbarBackground width = 1920, actualWidth = 1920
toolbarCanvas width = 1920, actualWidth = 1920
<Grid x:Name="gridTotal">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle x:Name="recTangle1" Grid.Column="0" Grid.Row="0"/>
<Rectangle x:Name="recTangle2" Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="12"/>
<Grid x:Name="toolbarGrid" Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="12">
<Canvas x:Name="toolbarCanvas" Width="{Binding ElementName=toolbarGrid, Path=ActualWidth}">
<RelativePanel x:Name="toolbarPanel" Canvas.Top="0" Width="{Binding ElementName=toolbarGrid, Path=ActualWidth}">
<Image x:Name="toolbarBackground" Source="ms-appx:///Assets/MainPage/toolbar/toolbar-background2.png"
Width="{Binding ElementName=toolbarGrid, Path=ActualWidth}"
Height="{Binding ElementName=toolbarGrid, Path=ActualHeight}" Stretch="Fill" />
<Viewbox x:Name="vb2" Stretch="Uniform" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="20,0,20,0"
Height="{Binding ElementName=recTangle1, Path=ActualHeight}"
Width="{Binding ElementName=recTangle1, Path=ActualWidth}">
<Button x:Name="toolbarHistory" Style="{StaticResource toolbarImageStyle}">
<Image Source="ms-appx:///Assets/MainPage/toolbar/toolbar-history.png" Stretch="UniformToFill" />
</Button>
</Viewbox>
</RelativePanel>
</Canvas>
</Grid>
</Grid>
I tried to understand your problem. If the problem was that u like to Elements follow actual screen size this one works. I changed the XAML code and hoping that next solution works fine for you. I rid of the Canvas because that element cause the problem. Anyway, in this example u do not need it (unless u have planned some other use later). And also to set Row/Column Width/Height values is unneeded. Bindings are also unnessessary.
<Grid x:Name="gridTotal">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle x:Name="recTangle1" Grid.Column="0" Grid.Row="0"/>
<Rectangle x:Name="recTangle2" Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="12"/>
<Grid x:Name="toolbarGrid" Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="12">
<RelativePanel x:Name="toolbarPanel" Canvas.Top="0">
<Image x:Name="toolbarBackground" Source="ms-appx:///Assets/MainPage/toolbar/toolbar-background2.png" Stretch="Fill" />
<Viewbox x:Name="vb2" Stretch="Uniform" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="20,0,20,0">
<Button x:Name="toolbarHistory">
<Image Source="ms-appx:///Assets/MainPage/toolbar/toolbar-history.png" Stretch="UniformToFill" />
</Button>
</Viewbox>
</RelativePanel>
</Grid>
</Grid>
I have the following XAML:
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<PasswordBox HorizontalAlignment="Center" Grid.Row="0" Margin="12" Width="260" Height="32" PlaceholderText="Confirm Password" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="ConfirmPassword"/>
<Button Content="Sign-Up" HorizontalAlignment="Center" Margin="12" Grid.Row="1" Width="260" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Register_Click"/>
</Grid>
Right now the grid is at the center of the screen, I wabt it to be a little bit higher, I can do it with margin, but I don't want any propery with pixel in my page. Is there any other wahy to do it?
Thanks.
The easiest way to get your grid slightly above the centre without using Margins would be to put it in another Grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="1.2*"/>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<PasswordBox HorizontalAlignment="Center" Grid.Row="0" Margin="12" Width="260" Height="32" PlaceholderText="Confirm Password" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="ConfirmPassword"/>
<Button Content="Sign-Up" HorizontalAlignment="Center" Margin="12" Grid.Row="1" Width="260" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Register_Click"/>
</Grid>
</Grid>
Note the second RowDefinition
<RowDefinition Height="1.2*"/>
This means the second row will take slightly more of the available space than the first row and you can adjust to meet your needs.
I want to create a grid into a grid. I tried the following piece of code, but this doesn't work, does anyone know why? And Do you have a solution?
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ShowGridLines="true">
<Grid.Background>
<LinearGradientBrush>
<GradientStop Color="#EEE8AA" />
<GradientStop Color="#2F4F4F" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="10*" />
<RowDefinition Height="90*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="80*" />
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100*" />
</Grid.RowDefinitions>
</Grid>
</Grid>
The code is correct. You wont see anything because the second grid just fills a specific grid cell in the parent grid and has no content. Try adding some text boxes or colours and you will see that it works fine.
See the sample below. You will have 3 text boxes displayed in your second grid correctly.
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ShowGridLines="true">
<Grid.Background>
<LinearGradientBrush>
<GradientStop Color="#EEE8AA" />
<GradientStop Color="#2F4F4F" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="10*" />
<RowDefinition Height="90*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="80*" />
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">TextBox1</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0">TextBox2</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="0">TextBox3</TextBlock>
</Grid>
</Grid>
If you want to see the Grid visually without adding content to it, at least try to set it's Height/Width to a fix value. I copy-pasted your code inside StackPanel set the outer Grid's Height to 100 :
<StackPanel Background="Gray">
<Grid ShowGridLines="true" Height="100" >
.......
</Grid>
</StackPanel>
Result :
I am developing a XAML based app and I have a spacing/layout issue. I currently have my main page as a 1 column grid. I have a ListBox though in which I need my data template to be displayed over 2 columns. The first data element should take up 75% of the screen and the second data element should take up the rest. When I run my app, the data from my listbox items are bunched on the left hand side of the screen. How can I change this behavior?
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="9*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="12"/>
</Grid.ColumnDefinitions>
<!--My Section-->
<Grid Grid.Row="3" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Selected Location" FontWeight="Bold" Style="{StaticResource grayTextBox}"/>
<Line Grid.Row="1" Grid.Column="0" Stroke="White" StrokeThickness="1" />
<ListBox Grid.Row="2" ItemsSource="{Binding Path=SelectedLocations, Mode=TwoWay}" HorizontalContentAlignment="Stretch" Visibility="{Binding Path=IsSelectedLocationAvailable, Converter={StaticResource visibilityConverter}}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Name}" />
<TextBlock Grid.Row="1" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Address}" />
<TextBlock Grid.Row="2" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=CityStateZip}" />
<StackPanel Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Orientation="Horizontal" HorizontalAlignment="Right">
<Rectangle Fill="Orange" />
<Rectangle Fill="Blue" />
</StackPanel>
</Grid>
Why use a Grid to center the content?
I currently have my main page as a 1 column grid
Why use a grid if it has just 1 column? Use margin on the stackpanel items.
<Grid x:Name="LayoutRoot">
<StackPanel Orientation="Vertical">
<TextBlock Text="Selected Location" FontWeight="Bold" Style="{StaticResource grayTextBox}"/>
<Line Stroke="White" StrokeThickness="1" />
<ListBox ItemsSource="{Binding Path=SelectedLocations, Mode=TwoWay}" HorizontalContentAlignment="Stretch" Visibility="{Binding Path=IsSelectedLocationAvailable, Converter={StaticResource visibilityConverter}}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Name}" />
<TextBlock Grid.Row="1" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Address}" />
<TextBlock Grid.Row="2" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=CityStateZip}" />
<StackPanel Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Orientation="Horizontal" HorizontalAlignment="Right">
<Rectangle Fill="Orange" />
<Rectangle Fill="Blue" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>