Grid inside Stackpanel doesn't stretch - xaml

The width of the Rectangle is now 0.
if I set the ColumnDefinition to 200 or width in Rectangle tot 200, than I can see the Rectangle. But with the star it's not working.
I'm Trying to set the width of Rectangle 1 and 3 to 40% width and Rectangle 2 to 20%.
What is wrong in my code?
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Orientation="Vertical" Margin="0,100,0,0">
<StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Beige" StrokeThickness="2" Stroke="Red" />
<Rectangle Grid.Column="1" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Rectangle Grid.Column="2" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Beige" StrokeThickness="2" Stroke="Red" />
</Grid>
</StackPanel>
</StackPanel>
</Grid>

Why would you need stackpanels at all? You could do with just grids.
Anyway, StackPanel doesn't stretch along its orientation (i.e. vertical stackpanel does not stretch vertically and horizontal stackpanel does not stretch horizontally).
Example:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid
Grid.Row="1"
Grid.Column="1"
Margin="0,100,0,0"
Background="Aquamarine"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Height="200" Fill="Beige" StrokeThickness="2" Stroke="Red" />
<Rectangle Grid.Column="1" Height="200"/>
<Rectangle Grid.Column="2" Height="200" Fill="Beige" StrokeThickness="2" Stroke="Red" />
</Grid>
</Grid>
Note: you don't need HorizontalAlignment="Stretch" VerticalAlignment="Stretch" for rectangles -- thay are stretching by default. And specifying VerticalAlignment="Stretch" along with Height="200" doesn't make sense anyway.
Update: And the problem in your inital code is here:
<StackPanel Orientation="Vertical" ... >
<StackPanel Orientation="Horizontal" ...>
<Grid>
Grid tries to occupy all available space. What space is available? You have two nested stackpanels: one doesn't stretch vertically and another doesn't stretch horizontally. So, the grid with no Height or Width specified has zero space available. If you remove Height="200" from rectangles, you may see that your grid is zero-sized.

Related

How to disable scaling for UWP apps

I'm designing uwp apps. My pc resolution is 1920 x 1080, 100% scale. All the elements are layout normal.
But when running app on a screen 1920 x 1080, 125% scale, the elements are not in the right place and all are 1.25x bigger.
So how to disable scale under all resolutions, or is there any solutions?
I am giving you the simple example in which i am showing two buttons and one grid you can run this on any resolution the left and right hand side button always keep in same position and grid will change accordingly resolution size
<Grid HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
<RowDefinition Height="169*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="113*"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,55,10,40" />
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,55,10,40" Grid.Column="2" />
<Grid Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Black" BorderThickness="2" Grid.RowSpan="2"/>
</Gid>
your code sample
<Grid HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="945"/>
<ColumnDefinition Width="945"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Color"
Margin="117, 84, 0, 0"
FontSize="48"/>
<Button Grid.Row="1" Content="Red" Width="500" Height="80" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Margin="445 30 0 0"
/>
<Button Grid.Row="1" Grid.Column="1" Content="Yellow" Width="500" Height="80"
Margin="0 30 445 0"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Grid Grid.Row="2" Grid.ColumnSpan="2"
Margin="84 40 84 0" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" BorderBrush="Black" BorderThickness="2"/>
</Grid>

How to set scroll-viewer inside scroll-viewer in UWP

i want to display a scroll-viewer inside scroll-viewer. The parent scroll-viewer should work vertically and child scroll-viewer work both horizontal and vertical.
i tried to add whole grid inside the parent scroll-viewer when i am resize the page the parent scroll-viewer is not working and child scroll-viewer is horizontal work not vertical.
<Grid>
<VisualStateManager> ...
<ScrollViewer >
<Grid HorizontalAlignment="Stretch" Height="1000" Margin="0,0,0,0" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="COne" Width="59"/>
<ColumnDefinition x:Name="CTwo" Width="31*"/>
<ColumnDefinition x:Name="CThree" Width="44*"/>
<ColumnDefinition x:Name="CFour" Width="53*"/>
<ColumnDefinition x:Name="CFive" Width="116*"/>
<ColumnDefinition x:Name="CSix" Width="40*"/>
<ColumnDefinition x:Name="CSeven" Width="262*"/>
<ColumnDefinition x:Name="CEight" Width="234*"/>
<ColumnDefinition x:Name="Cnine" Width="350*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="ROne" Height="45*"/>
<RowDefinition x:Name="RTwo" Height="23*"/>
<RowDefinition x:Name="RThree" Height="432*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border CornerRadius="5" extensions:Mouse.Cursor="Hand" BorderBrush="#E1E1E1" BorderThickness="1" Grid.ColumnSpan="8" Margin="7,18,31,395" Grid.Column="1" Grid.Row="2" >
<ScrollViewer x:Name="Gridscroller" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Grid.ColumnSpan="8" Grid.Column="1" Grid.Row="2" >
<Toolkit:DataGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible" extensions:Mouse.Cursor="Hand" Style="{StaticResource GridBackground}" BorderBrush="Transparent" BorderThickness="5" AllowFocusOnInteraction="False" x:Name="UserListView" SelectionMode="Single" FontSize="16" RelativePanel.AlignLeftWithPanel="True" Grid.ColumnSpan="8" Grid.Column="1" Grid.Row="2" OrderChanged="UserListView_OrderChanged" Tapped="UserListView_Tapped" >
.
.
.
</Toolkit:DataGrid>
</ScrollViewer>
</Border>
<TextBlock FontFamily="{StaticResource inventorySemiBoldFont}" Foreground="#444444" FontSize="13" Visibility="Visible" x:Name="SearchMessage" Grid.Column="3" HorizontalAlignment="Left" Margin="0,74,0,0" Grid.Row="2" VerticalAlignment="Top" Grid.ColumnSpan="4" Width="391"/>
<StackPanel HorizontalAlignment="Center" Margin="0,486,32,0" Grid.Row="2" VerticalAlignment="Top" Grid.ColumnSpan="7" Grid.Column="2" />
</Grid>
</ScrollViewer>
</Grid>
In ScrollViewer, scrolling only when the content width/height is larger than the container width/height, but the internal viewable area of the ScrollViewer is infinite, so if you want the child ScrollViewer to work, you need to set the width/height for it.
like:
<ScrollViewer>
<ScrollViewer width="500" HorizontalScrollBarVisibility="Auto" HorizontalScrollMode="Auto">
<!-- Content here -->
</ScrollViewer/>
</ScrollViewer>
Best regards.

Stackpanels side by side

I want to put stackPanels side by side. Then in each stack panel, there are different controls. Now the first stack panel is working. It has textblocks and text boxs. Now I want to add a button on the second stack panel and so on. The question is that the second panel doesn't show the button's content. Not sure why?
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" Width="300" HorizontalAlignment="Left" Margin="10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Year" TextAlignment="Center"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0" Text="Week" TextAlignment="Center"></TextBlock>
<TextBlock Grid.Column="2" Grid.Row="0" Text="File Location" TextAlignment="Center"></TextBlock>
</Grid>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="0" Margin="10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0">
<TextBlock Text="Get Informations" TextWrapping="Wrap" TextAlignment="Center"></TextBlock>
</Button>
</Grid>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="2" Grid.Row="0"></StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="1"></StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="2" Grid.Row="1"></StackPanel>
</Grid>
</StackPanel>
</StackPanel>
You are setting the width of the Stackpanel as 300, if you want a solution. either remove the stackpnael (the one that has 300 width) or fix the Grid inside that stackpanel to be 300

UWP TextBox won't stretch in StackPanel

I have a TextBlock and TextBox controls inside StackPanel, and I need to stretch TextBox to resize by the parent size in UWP.
<StackPanel Grid.Column="0" Grid.Row="1" Orientation="Horizontal">
<TextBlock Text="Name:" VerticalAlignment="Center" Width="130" />
<TextBox VerticalAlignment="Center" HorizontalAlignment="Stretch" />
</StackPanel>
This not works.. Any ideas?
The problem is the stack panel will only stretch to the size of the child elements so in your example you will only see one Textblock of 130 pixels and you will not see the TextBox.
To get the functionality you desire you should use a grid with two columns one 130 pixels and the other being * to fill up the entire column space that is available.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="130"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Name:" VerticalAlignment="Center" Width="130" />
<TextBox Grid.Row="0" Grid.Column="1"/>
</Grid>
I usually wrap a TextBlock and TextBox pair inside a DockPanel
<DockPanel Grid.Column="0" Grid.Row="1" >
<TextBlock Text="Name:"
VerticalAlignment="Center"
Margin="5"
/>
<TextBox VerticalAlignment="Center"/>
</DockPanel>
Edit
For UWP which doesn't have DockPanel:
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="Name:"
VerticalAlignment="Center"
Margin="5"
/>
<TextBox Grid.Column="1"
VerticalAlignment="Center" HorizontalAlignment="Stretch" />
</Grid>
</Grid>
I worked out a similar problem in UWP
<StackPanel Margin="{StaticResource SmallTopBottomMargin}" Orientation="Vertical">
<TextBlock Text="Project Name:" />
<TextBox /> <--full width
<TextBlock Text="Exported Template:" /> <--full width
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBox /> <--max width - button width
<Button Grid.Column="1">...</Button>
</Grid>

Width of controls inside listbox not changing after orientation change

I have a grid inside stackpanel which is inside a listbox.
This grid has a few control elements like rectangles and textblocks.
They stretch to the entire width in portrait but not in landscape.
Snapshot of emulator
This is the XAML:
<ListBox Name="PassList" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch">
<Grid Name="StackPanelWidth" Width="{Binding ElementName=PassList, Path=ActualWidth}">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="{Binding ElementName=StackPanelWidth, Path=ActualWidth}"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="White"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
RadiusX="10"
RadiusY="10"
/>
<Rectangle Fill="White"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,10,0,0"
/>
<Rectangle Fill="DarkGray"
Grid.Row="0"
Grid.Column="1"
Height="1"
VerticalAlignment="Bottom"
/>
<TextBlock Name="Country"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Left"
Margin="10,0,0,0"
VerticalAlignment="Center"
Text="{Binding Country}"
Foreground="Black"
FontWeight="Bold"
/>
.............
.............
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Is there any thing wrong with my code?
Any help will be appreciated.
Thanks.
why are you doing this?
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="{Binding ElementName=StackPanelWidth, Path=ActualWidth}"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
Here you are somehow specifying the width because of which its not resizing.
Also the stackpanel will automatically adjust to its child width, so no need to specify binding if thats what you were trying to do.