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.
Related
I want to create a standard Name and Address form like with multiple textboxs on a line to save space.
Is it better to start with Grids or Stack Panels and nest them? Is it better to create a custom control that combines TextBox and TextBlock?
I'll post my solution below. I was just curious if there's a better way to do this and what the merits of each method might be.
<!-- Snipplet of UWP XAML -->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Width="400" Background="Aqua" Padding="10"
BorderThickness="2" BorderBrush="Black" VerticalAlignment="Top">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="First Name"/>
<TextBlock Grid.Column="1" Text="Last Name"/>
<TextBox Grid.Row="1" Grid.Column="0" Background="White"
Text="John"/>
<TextBox Grid.Row="1" Grid.Column="1" Background="White"
Text="Smith"/>
</Grid>
<TextBlock>Address1</TextBlock>
<TextBox Background="White" Text="1 Center St"/>
<TextBlock>Address2:</TextBlock>
<TextBox Background="White"/>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="City"/>
<TextBlock Grid.Column="1" Text="State"/>
<TextBlock Grid.Column="2" Text="Zip"/>
<TextBox Grid.Row="1" Grid.Column="0" Background="White"
Text="Townville"/>
<TextBox Grid.Row="1" Grid.Column="1" Background="White"
Text="XX"/>
<TextBox Grid.Row="1" Grid.Column="2" Background="White"
Text="12345"/>
</Grid>
<TextBlock/>
<StackPanel
Orientation="Horizontal" FlowDirection="RightToLeft">
<Button Content="Ok" Margin="0,0,10,0"
Width="100" BorderThickness="1" BorderBrush="Black"/>
<Button Content="Cancel"
Width="100" BorderThickness="1" BorderBrush="Black"/>
</StackPanel>
</StackPanel>
</Grid>
you can design your control as you want or you can make it separately on a UserControl but thing should be need to note here , you already put the text already on textbox instead of using placeholder text , so i change it in your code
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Width="400" Background="Aqua" Padding="10"
BorderThickness="2" BorderBrush="Black" VerticalAlignment="Top">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="First Name"/>
<TextBlock Grid.Column="1" Text="Last Name"/>
<TextBox Grid.Row="1" Grid.Column="0" Background="White"
PlaceholderText="John"/>
<TextBox Grid.Row="1" Grid.Column="1" Background="White"
PlaceholderText="Smith"/>
</Grid>
<TextBlock>Address1</TextBlock>
<TextBox Background="White" PlaceholderText="1 Center St"/>
<TextBlock>Address2:</TextBlock>
<TextBox Background="White"/>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="City"/>
<TextBlock Grid.Column="1" Text="State"/>
<TextBlock Grid.Column="2" Text="Zip"/>
<TextBox Grid.Row="1" Grid.Column="0" Background="White"
PlaceholderText="Townville"/>
<TextBox Grid.Row="1" Grid.Column="1" Background="White"
PlaceholderText="XX"/>
<TextBox Grid.Row="1" Grid.Column="2" Background="White"
PlaceholderText="12345"/>
</Grid>
<TextBlock/>
<StackPanel
Orientation="Horizontal" FlowDirection="RightToLeft">
<Button Content="Ok" Margin="0,0,10,0"
Width="100" BorderThickness="1" BorderBrush="Black"/>
<Button Content="Cancel"
Width="100" BorderThickness="1" BorderBrush="Black"/>
</StackPanel>
</StackPanel>
</Grid>
and you can learn basics of uwp development from this link
In the interest of performance, having only one panel is better - see the UWP app developer docs on performance. Therefore, I would use a relative panel, ending up with something like this:
<RelativePanel>
<!-- Horizontal group -->
<TextBox x:Name="TxtBx1"/>
<TextBox x:Name="TxtBx2" RelativePanel.RightOf="TxtBx1"/>
<!-- Below the first group -->
<TextBox x:Name="TxtBx3" RelativePanel.Below="TxtBx1"/>
<!-- Another horizontal group -->
<TextBox x:Name="TxtBx4" RelativePanel.Below="TxtBx3"/>
<TextBox x:Name="TxtBx5" RelativePanel.RightOf="TxtBx4"/>
</RelativePanel>
But in all honesty, there is no 'correct' answer as such - it depends on what you rank more highly in your app, be it performance or code readability.
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
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>
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.
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.