I have a usercontrol containing a heading, a listbox and a button in the bottom.
When the listbox is filled with elements, I want the listbox to stretch to a maximium height, showing vertical scrollbars and the botton elements should be right below the listbox.
If someone resizes the window, the listbox should resize (respecting maxheight property) and show scrollbars when it needs to. I also want the save button to be right beneath the listbox and not in the bottom part of the usercontrol
I have found this to be really hard, once the listbox is filled with elements, it stretches out, no matter what.
<UserControl x:Class="WpfApplication1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:system="clr-namespace:System;assembly=mscorlib"
Height="300" Width="525">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MaxHeight="150"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Heading"/>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" MaxHeight="100">
<ListView.Items>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
</ListView.Items>
</ListView>
</Grid>
<Separator Grid.Row="2" />
<Button Grid.Row="3" Width="75" Content="Save"/>
</Grid>
</UserControl>
Your original XAML seemed to be quite strange... I'm not surprised it wasn't working. For example, you set the ListView.MaxHeight property to 100, but also set the relevant RowDefinition.MaxHeight property to 150. Perhaps you meant to do that, I don't know... either way, you just needed to use the * setting for the Height property on the ListViews RowDefinition, set some VerticalAlignment properties and remove the inner Grid that did nothing useful. Try this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Heading" />
<ListView Grid.Row="1" MaxHeight="100" VerticalAlignment="Top">
<ListView.Items>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
</ListView.Items>
</ListView>
<Separator Grid.Row="2" />
<Button Grid.Row="3" Width="75" Height="25" Content="Save"
VerticalAlignment="Top" />
</Grid>
UPDATE >>>
When working with Grids, just experiment with the "*" setting, which will take up all of the remaining space in the Grid. It's really not that difficult. Try this instead:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Heading"/>
<ListView Grid.Row="0" MaxHeight="100" VerticalAlignment="Top">
<ListView.Items>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
</ListView.Items>
</ListView>
<Separator Grid.Row="1" VerticalAlignment="Top" />
<Button Grid.Row="2" Width="75" Height="25" Content="Save"
VerticalAlignment="Top" />
</Grid>
UPDATE 2 >>>
Ok, so this should now be what you're after:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" MaxHeight="100" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Heading" />
<ListView Grid.Row="1" MinHeight="30" MaxHeight="100" VerticalAlignment="Top">
<ListView.Items>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
</ListView.Items>
</ListView>
<Separator Grid.Row="2" VerticalAlignment="Top" />
<Button Grid.Row="3" Width="75" Height="25" Content="Save"
VerticalAlignment="Top" />
</Grid>
Related
I have a very simple page with a header and several textboxes in my UWP app:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Page Title!" />
<ScrollViewer Grid.Row="1" VerticalScrollMode="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Margin="20" />
<TextBox Grid.Row="1" Margin="20" />
<TextBox Grid.Row="2" Margin="20" />
<TextBox Grid.Row="3" Margin="20" />
<TextBox Grid.Row="4" Margin="20" />
</Grid>
</ScrollViewer>
</Grid>
In Windows 10 mobile, when the bottom textbox get focus and soft keyboard appears, the full content of the page is scrolling up and I don't want this. I want the header to remain visible and the scrollviewer scrolls to the textbox to keep in view.
How can I achive this?
Thanks in advance.
You can use the CommandBar and add the TextBlock into CommandBar.Content, then the header will remain visible in the page. The page xaml code should look like this,
<Page.TopAppBar>
<CommandBar Background="Transparent" OverflowButtonVisibility="Collapsed">
<CommandBar.Content>
<TextBlock Text="Page Title!" Margin="20" />
</CommandBar.Content>
</CommandBar>
</Page.TopAppBar>
<Grid>
<ScrollViewer VerticalScrollMode="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Margin="20" />
<TextBox Grid.Row="1" Margin="20" />
<TextBox Grid.Row="2" Margin="20" />
<TextBox Grid.Row="3" Margin="20" />
<TextBox Grid.Row="4" Margin="20" />
</Grid>
</ScrollViewer>
</Grid>
I'm using a TreeView in WPF that has an explicit height set. The vertical scrollbar is cut off at the bottom (independent of whether items are bound/shown or not; I've enabled the scrollbar to be able to reproduce the problem without items attached). XAML source below.
<Window x:Class="demo.TreeViewProblem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="..."
ResizeMode="CanResizeWithGrip"
SizeToContent="WidthAndHeight">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock
Grid.Column="0"
Grid.Row="0"
Margin="5,10,5,5"
Text="Some label"/>
<TextBlock
Grid.Column="1"
Grid.Row="0"
Margin="5,10,5,5"
Text="Some value"/>
<TreeView
ScrollViewer.VerticalScrollBarVisibility="Visible"
Grid.Column="1"
Grid.Row="1"
Height="200"
MinHeight="200"
Width="300"
Margin="5,10,5,5"
VerticalAlignment="Top" />
<TextBlock
Grid.Column="0"
Grid.Row="2"
Margin="5,10,5,5"
Text="Some label"/>
<TextBox
Grid.Column="1"
Grid.Row="2"
Width="80"
Margin="5,10,5,5"
HorizontalAlignment="Left"
Text="Some value"/>
<TextBlock
Grid.Column="0"
Grid.Row="3"
Margin="5,10,5,5"
Text="Some label"/>
<TextBox
Grid.Column="1"
Grid.Row="3"
Width="80"
Margin="5,10,5,5"
HorizontalAlignment="Left"
Text="Some value"/>
<Button
HorizontalAlignment="Center"
Margin="10,10,10,10"
Content="Close"
Grid.ColumnSpan="2"
Grid.Column="0"
Grid.Row="4"/>
</Grid>
</Window>
Change the RowDefinition for the row containing your TreeView to this:
<RowDefinition Height="Auto" />
When set to "Auto", the row will calculate how much space it needs.
EDIT: Alternatively, you could set the other rows to Auto and then make your TreeView stretch instead. With this approach your window will scale nicer when the user resizes it.
From the row definitions:
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
From the tree:
<TreeView VerticalAlignment="Stretch"
... />
<Hub x:Name="Hub" x:Uid="Hub" Header="Clock +" Background="Black"
SectionsInViewChanged="Hub_SectionsInViewChanged">
<HubSection Tag="0" Name="WorldClock" x:Uid="WorldClock" Header="WORLD CLOCK"
DataContext="{Binding Groups}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}" FontSize="22" >
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Style="{StaticResource SubheaderTextBlockStyle}"
Grid.Row="1" Margin="0,10,0,0" TextWrapping="Wrap"
Text="" x:Name="date_time_block"/>
</Grid>
</DataTemplate>
</HubSection>
my main concern is that in the above code there is textblock I want to know how to access that textblock in c#. I know c# but a little knew to XAML.If I put textblock outside hub section it is accessible but when I put inside hub section it is not Please help!!
I have the following example:
<Window x:Class="WpfOverlayTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="400" Width="600">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Width="600" Height="200" Background="LightBlue">
<Grid Margin="0,125,0,0" Height="75" Width="200" Background="Red">
<Grid Margin="0,75,0,0" Background="Black" Height="20" Width="200" />
</Grid>
</Grid>
<Grid Grid.Row="1" Height="200" Width="600" Background="LightGreen" />
</Grid>
How can I make the Black Grid being displayed?
edit:
To make the Problem a bit more clear:
I Want to define the Black Grid inside the Red Grid, but it should be displayed over the Green Grid.
See the Red Grid as a UserControl and the Black Grid as a Menu Overlay.
Sometimes I see questions and answers here that I just can't believe. If you want to put two or more elements into one Grid.Row or Column, then just set their Grid.Row values to the same value. The lower the element is defined in the XAML, the further in front the element will be in the UI. So to add the black Grid on top of the green Grid, you can just do this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Width="600" Height="200" Background="LightBlue">
<Grid Margin="0,125,0,0" Height="75" Width="200" Background="Red">
</Grid>
</Grid>
<Grid Grid.Row="1" Height="200" Width="600" Background="LightGreen" />
<Grid Grid.Row="1" Background="Black" VerticalAlignment="Center"
Height="20" Width="200" /> <!-- This will be on top -->
</Grid>
UPDATE
It's pretty difficult to work out what you actually want, but after reading the comments, it seems as though you might want this instead:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Width="600" Height="200" Background="LightBlue">
<Grid Margin="0,125,0,0" Height="75" Width="200" Background="Red">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Black" VerticalAlignment="Center" Height="20" Width="200" />
</Grid>
</Grid>
<Grid Grid.Row="1" Height="200" Width="600" Background="LightGreen" />
</Grid>
This is basic Grid stuff. I recommend the material in the Grid Class page on MSDN.
UPDATE 2
Now that you have provided a description of your problem in your question, I can finally provide the correct XAML for your requirements:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Width="600" Height="200" Background="LightBlue" />
<Grid Grid.Row="1" Height="200" Width="600" Background="LightGreen" />
<Grid Grid.Row="1" VerticalAlignment="Center" Height="75" Width="200" Background="Red">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- This will be on top -->
<Grid Grid.Row="0" Background="Black" VerticalAlignment="Center" Height="20" Width="200" />
</Grid>
</Grid>
Set a RowDefinition on your Red grid and assign the Black Grid to it
<Canvas>
<Grid Width="600" Height="200" Background="LightBlue">
</Grid>
<Grid Margin="0,200,0,0" Height="175" Width="600" Background="LightGreen" />
<Grid Margin="200,125,0,0" Height="100" Width="200" Background="Red">
<Grid Margin="0,75,0,0" Background="Black" Height="20" Width="200" />
</Grid>
</Canvas>
EDIT: Added a screenshot
EDIT: Switched to a Canvas
now I'm using the tabcontrol to arrange my UI. At the first, I put my button outside my tabcontrol; however, when I put the button into the tabcontrol, it gave message, Object reference not set to an object instance. Does anyone know why I got this message ?
edited
Below is my xaml:
<Window x:Class="StudySystem.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="UI" Height="600" Width="811" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:my="clr-namespace:StudySystem" Loaded="Window_Loaded">
<Grid Width="791">
<Grid.RowDefinitions>
<RowDefinition Height="129*" />
<RowDefinition Height="432*" />
</Grid.RowDefinitions>
<TabControl Margin="2,0,0,42">
<TabItem Header="Book Info" >
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="178*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="22*" />
</Grid.RowDefinitions>
<TextBlock Text="Book Code:" Height="25" Margin="0,15,0,45"></TextBlock>
<TextBox Name="txtCode" Grid.Column="1" Margin="2,15,0,51"
Width="148"></TextBox>
<TextBlock Grid.Row="1" Text="Title:" Margin="0,1,0,33" Height="18"></TextBlock>
<TextBox Name="txtTitle" Grid.Row="1" Grid.Column="1" Margin="2,1,148,32" Grid.ColumnSpan="2"></TextBox>
<TextBlock Grid.Row="3" Text="Author:" Margin="0,5,0,33" Height="17"></TextBlock>
<TextBox Name="txtAuthor" Grid.Row="3" Grid.Column="1" Margin="0,6,0,30"></TextBox>
<Button Content="OK" Grid.Row="4" Grid.Column="1" Margin="0,1,0,37"></Button>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Window>
I've seen this before, its code that references things in your form before you create the form. Check the order of what you are calling.
Inside Windows tag i have added this code and for me its working fine...
<Grid Width="auto">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="432*" />
</Grid.RowDefinitions>
<TabControl Grid.Row="1">
<TabItem Header="Book Info" >
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="178*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="22*" />
</Grid.RowDefinitions>
<TextBlock Text="Book Code:" Height="25" Margin="0,15,0,45"> </TextBlock>
<TextBox Name="txtCode" Grid.Column="1" Margin="2,15,0,51"
Width="148"></TextBox>
<TextBlock Grid.Row="1" Text="Title:" Margin="0,1,0,33" Height="18"></TextBlock>
<TextBox Name="txtTitle" Grid.Row="1" Grid.Column="1" Margin="2,1,148,32" Grid.ColumnSpan="2"></TextBox>
<TextBlock Grid.Row="3" Text="Author:" Margin="0,5,0,33" Height="17"></TextBlock>
<TextBox Name="txtAuthor" Grid.Row="3" Grid.Column="1" Margin="0,6,0,30"></TextBox>
<Button Content="OK" Grid.Row="4" Grid.Column="1" Margin="0,1,0,37"></Button>
</Grid>
</TabItem>
</TabControl>
</Grid>
what you have mentioned in window_loaded??