I've a project with 1 header row and 1 content row. The content row is divided into 3 columns (groupboxes). These 3 columns are realized with GridSplitter.
Source Code:
<Window
x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ViewMenu="clr-namespace:Cons.ViewMenu"
Title="Test Gridsplitter"
Height="700"
Width="1000">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVisConverter" />
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Row 0 -->
<GroupBox Name="Menu" Grid.Row="0">
<ViewMenu:LockedToolBar>
<ToggleButton x:Name="HideColumn0Button" IsChecked="True" Width="80" Height="40">Hide C0</ToggleButton>
<ToggleButton x:Name="HideColumn1Button" IsChecked="True" Width="80" Height="40">Hide C1</ToggleButton>
<ToggleButton x:Name="HideColumn2Button" IsChecked="True" Width="80" Height="40">Hide C2</ToggleButton>
</ViewMenu:LockedToolBar>
</GroupBox>
<!-- Row 1 -->
<GroupBox Name="Body" Grid.Row="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="80" />
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*" MinWidth="80" />
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*" MinWidth="80" />
</Grid.ColumnDefinitions>
<!-- Column 0 -->
<GroupBox Header="Column 0"
Name="ds"
Grid.Row="0"
Grid.Column="0"
Visibility="{Binding Path=IsChecked, ElementName=HideColumn0Button, Converter={StaticResource BoolToVisConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ViewMenu:LockedToolBar Grid.Row="0">
</ViewMenu:LockedToolBar>
</Grid>
</GroupBox>
<!-- Column 1 -->
<GroupBox Header="Column 1"
Grid.Row="0"
Grid.Column="2"
Visibility="{Binding Path=IsChecked, ElementName=HideColumn1Button, Converter={StaticResource BoolToVisConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ViewMenu:LockedToolBar Grid.Row="0">
</ViewMenu:LockedToolBar>
</Grid>
</GroupBox>
<!-- Column 2 -->
<GroupBox Header="Column 2"
Grid.Row="0"
Grid.Column="4"
Visibility="{Binding Path=IsChecked, ElementName=HideColumn2Button, Converter={StaticResource BoolToVisConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ViewMenu:LockedToolBar Grid.Row="0">
</ViewMenu:LockedToolBar>
</Grid>
</GroupBox>
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="5"/>
<GridSplitter Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="5"/>
</Grid>
</GroupBox>
</Grid>
</Window>
I click on HideColumn1Button, column 1 is hidden, but the other two columns have the same width as before. But I want, that column 0 and 2 are auto resized to the complete width.
Does anyone of you know, how to do that?
If you wish to bind it using a checkbox then you can try the following code, just build a library out of it and make use of extended column definition. Courtesy(immortalus)
http://www.codeproject.com/Articles/437237/WPF-Grid-Column-and-Row-Hiding
Alternatively, on the button_click or checkbox_checked you can write code(I have named the grid as testgrid), remember to add the reverse code as well:
testgrid.ColumnDefinitions[0].Width = new GridLength(0);
testgrid.ColumnDefinitions[0].MinWidth = 0;
An even more extended version is to write your own Storyboard, but the above two should help.
Regards
Kajal
Your BooleanToVisibilityConverter needs to return Visibility.Collapsed, not Visibility.Hidden. That would be the visual equivalent to setting the width to 0.
Edit
Find your definition of BooleanToVisibilityConverter somewhere in your code.
You should only have 3 columns. Put the GridSplitters in Columns 1 and 2, HorizontalAlignment="Left". For each GroupBox set Margin="5,0,0,0".
Please try to verify that BooleanToVisibilityConverter needs to return Visibility.Collapsed, not Visibility.Hidden.
BooleanToVisibilityConverter.cs source code in C# .NET
You should only have 3 columns with Auto width for column 0. Put the GridSplitters in Columns 1 and 2.
Here is the code i tried :
<Window
x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ViewMenu="clr-namespace:Cons.ViewMenu"
Title="Test Gridsplitter"
Height="700"
Width="1000">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVisConverter" />
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Row 0 -->
<GroupBox Name="Menu" Grid.Row="0">
<StackPanel>
<ToggleButton x:Name="HideColumn0Button" IsChecked="True" Width="80" Height="40">Hide C0</ToggleButton>
<ToggleButton x:Name="HideColumn1Button" IsChecked="True" Width="80" Height="40">Hide C1</ToggleButton>
<ToggleButton x:Name="HideColumn2Button" IsChecked="True" Width="80" Height="40">Hide C2</ToggleButton>
</StackPanel>
</GroupBox>
<!-- Row 1 -->
<GroupBox Name="Body" Grid.Row="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" MinWidth="150"/>
<ColumnDefinition Width="*" MinWidth="150"/>
</Grid.ColumnDefinitions>
<!-- Column 0 -->
<GroupBox Header="Column 0"
Name="ds"
Margin="5,0,0,0"
Grid.Row="0"
Width="150"
Grid.Column="0"
Visibility="{Binding Path=IsChecked, ElementName=HideColumn0Button, Converter={StaticResource BoolToVisConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
</StackPanel>
</Grid>
</GroupBox>
<!-- Column 1 -->
<GroupBox Header="Column 1"
Grid.Row="0"
Grid.Column="1"
Margin="5,0,0,0"
Visibility="{Binding Path=IsChecked, ElementName=HideColumn1Button, Converter={StaticResource BoolToVisConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
</StackPanel>
</Grid>
</GroupBox>
<!-- Column 2 -->
<GroupBox Header="Column 2"
Grid.Row="0"
Margin="5,0,0,0"
Grid.Column="2"
Visibility="{Binding Path=IsChecked, ElementName=HideColumn2Button, Converter={StaticResource BoolToVisConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
</StackPanel>
</Grid>
</GroupBox>
//Put the GridSplitters in Columns 1 and 2, HorizontalAlignment="Left".
<GridSplitter Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="5"/>
<GridSplitter Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="5"/>
</Grid>
</GroupBox>
</Grid>
</Window>
Before hide
After Hide
How to create a GridSplitter that occupies a column
To specify a GridSplitter that occupies a column in a Grid, set the Column attached property to one of the columns that you want to resize. If your Grid has more than one row, set the RowSpan attached property to the number of rows. Then set the HorizontalAlignment to Center, set the VerticalAlignment property to Stretch, and set the Width of the column that contains the GridSplitter to Auto.
The following example shows how to define a vertical GridSplitter that occupies a column and resizes the columns on either side of it.
Credit : http://msdn.microsoft.com/en-us/library/ms745672(v=vs.110).aspx
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
..
<GridSplitter Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="True"
Width="5"
/>
Related
I have a page with a simple grid (2x2). In one grid on the bottom left corner is another Grid and inside this grid is a ListView bound to a collection. Entries can be added to the collection so the ListView grows in height (height of ListView is set to auto, so that all space available is used).
What I want is, if all available space (from the screen height) is used, scrollbars for the ListView should appear and should be usable. Funny (unfunny) thing is: scrollbars do appear but I cannot use them, I cannot scroll the ListView with the vertical scrollbar that appears when I hover the ListView.
It works, when I set the height of the ListView to a fixed value, but I don't want it that way, because then it doesn't use all the available space on the screen.
This is the XAML of the page (I removed some parts for demonstration purposes) :
<Page
x:Class="Qooli.TimeTracker.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Qooli.TimeTracker"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
...
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Name="spAddEntry" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30">
<TextBlock Text="Add new entry:" Name="lblAddNewEntry" />
...
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30">
<TextBlock Text="Allocated time:" Name="lblAllocatedTime" />
...
</StackPanel>
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Margin="30">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="Daily overview:" Name="lblDailyOverview" Grid.Row="0" Grid.Column="0" />
<ListView Name="lvTimeEntries" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left"
Height="Auto"
MinHeight="100"
VerticalAlignment="Top"
MinWidth="300"
SelectionMode="Single"
ItemsSource="{x:Bind ViewModel.TimeEntriesAdvancedCollectionView, Mode=OneWay}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.IsVerticalRailEnabled="True"
ScrollViewer.VerticalScrollMode="Enabled">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="local:TimeEntry">
<Grid Background="{Binding Type, Converter={StaticResource TimeEntryTypeColorConverter}}" Padding="5">
<Grid.RowDefinitions>
<RowDefinition Height="200"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Bind Time, Mode=OneWay}" Style="{StaticResource TitleTextBlockStyle}"
MinWidth="60"
MaxWidth="60"
Grid.Row="0" Grid.Column="0">
</TextBlock>
<TextBlock Text="{x:Bind Title, Mode=OneWay}" Style="{StaticResource BodyTextBlockStyle}" Margin="5,0,0,0"
MinWidth="100"
MaxWidth="100"
Grid.Row="0" Grid.Column="1">
</TextBlock>
<Button Name="btnEditTimeEntry" Grid.Row="0" Grid.Column="2" Margin="5,5,5,5">
<SymbolIcon x:Name="edit" Symbol="Edit"/>
</Button>
<Button Name="btnDeleteTimeEntry" Grid.Row="0" Grid.Column="3" Margin="5,5,5,5">
<SymbolIcon x:Name="delete" Symbol="Delete"/>
</Button>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>
</Grid>
<StackPanel Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30">
<TextBlock Style="{StaticResource summaryTextStyle}" Text="Start time:" Name="lblDayStartTime" />
...
</StackPanel>
</Grid>
</Page>
Can someone spot why it is behaving this way?
You need to set the height of the second row to "*" for both grids.
I want to use a dataTemplate to show a video source from four different cameras. My datatemplate is something like this:
<DataTemplate x:Key="MultiViewTemplate">
<Grid x:Name="MultiViewGrid" ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="GridVideo1" Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Image x:Name="imageMultiVideoStreaming1" Margin="1" Source="/app;component/Images/No_image_available.png" />
</Grid>
<Grid x:Name="GridVideo2" Grid.Column="1" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Image x:Name="imageMultiVideoStreaming2" Margin="1" Source="/app;component/Images/No_image_available.png" />
</Grid>
<Grid x:Name="GridVideo3" Grid.Column="0" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Image x:Name="imageMultiVideoStreaming3" Margin="1" Source="/app;component/Images/No_image_available.png" />
</Grid>
<Grid x:Name="GridVideo4" Grid.Column="1" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Image x:Name="imageMultiVideoStreaming4" Margin="1" Source="/app;component/Images/No_image_available.png" />
</Grid>
</Grid>
</DataTemplate>
...
<Grid x:name"MainGrid" >
<ContentControl x:Name="CameraContainer" Content="{Binding}" ContentTemplate=Value="{StaticResource MultiViewTemplate}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</Grid>
At the beginning, when I run the application, every grid should show the image No_image_avaiable.png. It works correcty. After that, I try to connect with the cameras and each video source should be shown in GridVideo1, GridVideo2...
If I do this in code-behind I can see the video from camera 1...
MainGrid.Children.Add(VideoStreamingGrid1)
but I would like to do something like this:
...GridVideo1.Children.Add(VideoStreamingGrid1)
...GridVideo2.Children.Add(VideoStreamingGrid2)
...GridVideo3.Children.Add(VideoStreamingGrid3)
...GridVideo4.Children.Add(VideoStreamingGrid4)
How can I do that?
Thanks.
I'm using Visual Studio 2013 and I wrote some code for Windows Phone 8.1 Apps in C#. Now I've got a little problem with the layout in XAML with grids.
Elements in grids should be ordered/layered in the order in the code, but this didn't work for me. I've got two grids in a grid and the comboboxlist of the first grid is overlapped by the other grid/textblock. I tried to rearrange the grid in XAML, but that also did not solved the problem.
overlapping image from the app
In this image there should be 2 more items in the open combobox list, but those are overlapped by the grid below it.
Here is the code snippet:
<Grid Margin="0, 50, 0, 0">
<Grid.RowDefinitions>
<RowDefinition Height="115"/>
<RowDefinition Height="80"/>
<RowDefinition Height="80"/>
<RowDefinition Height="115"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--Third Row-->
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Woche:"/>
<ComboBox Name="WochenComboBox"
Grid.Column="0"
Style="{StaticResource StandardAppComboBox}"/>
<TextBlock Grid.Column="1"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Ort:"/>
<TextBox Name="OrtTextBox"
Grid.Column="1"
Style="{StaticResource StandardAppTextBox}"/>
</Grid>
<!--Second Row-->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Stunde:"/>
<ComboBox Name="StundenZeitenComboBox"
Grid.Column="0"
Style="{StaticResource StandardAppComboBox}"
ItemsSource="{Binding Einstellung, Converter={StaticResource EinstellungsStundenToComboBoxListConverter}}"
DisplayMemberPath="Value"
SelectionChanged="StundenZeitenComboBox_SelectionChanged"/>
<TextBlock Grid.Column="1"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Veranstaltungsart:"/>
<ComboBox Name="VeranstaltungsartComboBox"
Grid.Column="1"
Style="{StaticResource StandardAppComboBox}"/>
</Grid>
</Grid>
What should I use/do to remove this overlpapping.
Use stack panels. Items inside a stack panel will not overlap.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="115" />
<RowDefinition Height="80" />
<RowDefinition Height="80" />
<RowDefinition Height="115" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--Third Row-->
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="Woche:" />
<ComboBox Name="WochenComboBox" Grid.Column="0" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="Ort:" />
<TextBox Name="OrtTextBox" Grid.Column="1" />
</StackPanel>
</Grid>
<!--Second Row-->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="Stunde:" />
<ComboBox Name="StundenZeitenComboBox" Grid.Column="0" DisplayMemberPath="Value" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="Veranstaltungsart:" />
<ComboBox Name="VeranstaltungsartComboBox" Grid.Column="1" />
</StackPanel>
</Grid>
</Grid>
I have the following Window
Now if I try to pull down the Gridsplitter I can only as far as the blue Grid fits in the visible Window. But when sliding down the splitter I want a scrollbar to appear and be able to pull it down to the botton until the blue Grid is not visible any more.
<Window.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Menu Name="MainMenu" Grid.Row="0">
</Menu>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DockPanel x:Name="Green" Grid.Column="0" Width="Auto" Height="Auto">
<views:MyView></views:MyView>
</DockPanel>
<GridSplitter Grid.Column="0" Width="6"></GridSplitter>
<Grid Grid.Column="1" >
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="7" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<views:ListView x:Name="Yellow" ></views:ListView>
</Grid>
<GridSplitter Grid.Row="1" Height="7" HorizontalAlignment="Stretch" />
<Grid Grid.Row="2" >
<ContentControl Content="{Binding LoadedControl}" x:Name="Blue" />
</Grid>
</Grid>
</ScrollViewer>
</Grid>
</Grid>
<StatusBar x:Name="StatusBar" Grid.Row="2">
</StatusBar>
</Grid>
</Window.Content>
What do I have to change here?
Move your ScrollViewer further down so it wraps the blue ContentControl in row 2, and ensure the ContentControl has a Height or MinHeight set.
ScrollViewers allow their child to take up as much space as they want, and only shows scrollbars if the child object gets larger than the ScrollViewer size.
Also as a side note, you can remove some of those extra Grid's in your layout to make it easier to read. Here's an example with a bunch of them removed, and the first one being replaced with a DockPanel :)
<DockPanel>
<Menu Name="MainMenu" DockPanel.Dock="Top" Height="25" />
<StatusBar x:Name="StatusBar" DockPanel.Dock="Bottom" Height="25"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="6" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<views:MyView x:Name="Green" Grid.Column="0" />
<GridSplitter Grid.Column="1" Width="6" />
<Grid Grid.Column="2" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="7" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<views:ListView x:Name="Yellow" Grid.Row="0" />
<GridSplitter Grid.Row="1" Height="7" HorizontalAlignment="Stretch" />
<ScrollViewer Grid.Row="2" VerticalScrollBarVisibility="Auto">
<ContentControl x:Name="Blue" MinHeight="400"/>
</ScrollViewer>
</Grid>
</Grid>
</DockPanel>
Hope you find a better solution XD as mine use a code behind
I used the DragDelta event of the control GridSplitter and enlarge the height of the grid so the ScrollBar can be activated
The xaml Code:
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DockPanel x:Name="Green" Grid.Column="0" Width="Auto" Height="Auto" Background="#FF0CFA8F" >
<local:BusyUserControl Width="200" Height="200"/>
</DockPanel>
<GridSplitter ResizeDirection="Rows" Grid.Column="0" Width="6"></GridSplitter>
<ScrollViewer x:Name="MainScrollViewer" VerticalScrollBarVisibility="Auto" Grid.Column="1" >
<Grid x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="7" />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid >
<views:ListView x:Name="Yellow" ></views:ListView>
</Grid>
<GridSplitter Grid.Row="1" Height="7" ResizeBehavior="PreviousAndNext" HorizontalAlignment="Stretch" DragDelta="GridSplitter_DragDelta" />
<Grid Grid.Row="2">
<ContentControl Content="{Binding LoadedControl}" x:Name="Blue" />
</Grid>
</Grid>
</ScrollViewer>
</Grid>
The code Behind:
private void GridSplitter_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
if (e.VerticalChange > 1500 || e.VerticalChange > -15000) return;
if (e.VerticalChange > 0 || Visibility.Visible.Equals(MainScrollViewer.ComputedVerticalScrollBarVisibility))
{
this.MainGrid.Height = this.MainGrid.ActualHeight + e.VerticalChange;
}
e.Handled = true;
}
Note:
When the scrollbar is no more visible I stop shrinking the grid (keep the grid stretshed) that’s the meaning of the condition
Visibility.Visible.Equals(MainScrollViewer.ComputedVerticalScrollBarVisibility)
Hope this could help you and thx for the question :)
if you want to display a vertical scroll bar for each part in the splitted grid try the following code :
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DockPanel x:Name="Green" Grid.Column="0" Width="Auto" Height="Auto" Background="#FF0CFA8F" >
<local:BusyUserControl Width="200" Height="200"/>
</DockPanel>
<GridSplitter Grid.Column="0" Width="6"></GridSplitter>
<Grid Grid.Column="1" >
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="7" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="0" >
<Grid >
<views:ListView x:Name="Yellow" ></views:ListView>
</Grid>
</ScrollViewer>
<GridSplitter Grid.Row="1" Height="7" HorizontalAlignment="Stretch" />
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="2" >
<Grid Grid.Row="2" >
<ContentControl Content="{Binding LoadedControl}" x:Name="Blue" />
</Grid>
</ScrollViewer>
</Grid>
</Grid>
</Grid>
otherwise clarify your need
Right xaml code looks this way:
mc:Ignorable="d" d:DesignWidth="363" Height="628">
<Grid Style="{StaticResource ContentRoot}">
<ScrollViewer Margin="0,-105,-9,0">
<StackPanel MinWidth="200" HorizontalAlignment="Left" Width="474" Height="459">
</InlineUIContainer>
<Run Language="ru-ru"/>
<LineBreak/>
<Run Language="ru-ru" Text="Num1"/>
<LineBreak/>
<InlineUIContainer>
<TextBox d:DesignUseLayoutRounding="True"
Width="160"
UseLayoutRounding="True"
Text="Enter num"
TextWrapping="Wrap"
x:Name="TxtBlock_numRequest"
InputMethod.IsInputMethodEnabled="False"
Height="23"
AutoWordSelection="True"/>
</InlineUIContainer>
<LineBreak/>
<Run Language="ru-ru"/>
<LineBreak/>
<Run Language="ru-ru" Text="ID"/>
<Run Text=" "/>
<LineBreak/>
<InlineUIContainer>
<TextBox Width="160"
Text="Enter num"
TextWrapping="Wrap"
x:Name="TxtBlock_IDWork"
Height="23"/>
As you can there are two textboxes, which located one under other one, and I need to put them into same level, I tried it to via constructor, it simply don't do it in my particular case. To clearify I have added pictures.
And don't be afraid foreign inscriptiones, its doesn't matter.
I just don't know how to fix this, and I think it' related with StackPanel. Any ideas ?
UPD: All xaml code here http://snipt.org/Btff4/Default#expand
UPD: May be it possible to put one more stack panel rigt to existing one?
You are probably looking for Orientation attribute:
<StackPanel MinWidth="200" HorizontalAlignment="Left" Width="474" Height="459" Orientation="Horizontal">
Update
Adding a very basic example to illustrate how StackPanel works:
<Window x:Class="WpfTestBench.Stackpanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" SizeToContent="WidthAndHeight">
<StackPanel Orientation="Horizontal" Margin="10">
<TextBox Text="First textbox" Height="20" Margin="5, 0" />
<TextBox Text="Second textbox" Height="20" />
</StackPanel>
</Window>
Execution result:
Update
Adding XAML which allows to achieve desired layout:
<Window x:Class="WpfTestBench.Stackpanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Sample layout" SizeToContent="Height" Width="400">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Label Grid.ColumnSpan="3" Grid.Row="0" Content="Задайте параметры заявок" FontWeight="Bold" FontSize="16" />
<Grid Grid.Column="0" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="номер заявки" />
<TextBox Grid.Row="1" Text="Введите число" />
<TextBlock Grid.Row="3" Text="приоритет заявки" />
<ComboBox Grid.Row="4" SelectedIndex="0">
<ComboBoxItem Content="Высокий" />
<ComboBoxItem Content="Средний" />
<ComboBoxItem Content="Низкий" />
</ComboBox>
</Grid>
<Grid Grid.Column="2" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="идентификатор вида работы" />
<TextBox Grid.Row="1" Text="Введите число" />
<TextBlock Grid.Row="3" Text="номер траектории" />
<TextBox Grid.Row="4" Text="Введите число" />
</Grid>
</Grid>
</Window>
Execution result:
You can use a StackPanel with Orientation="Horizontal", as a container. Something like:
<StackPanel Orientation="Horizontal">
<StackPanel>
<TextBlock>Label</TextBlock>
<TextBox Width="150"/>
</StackPanel>
<StackPanel>
<TextBlock>Label 2</TextBlock>
<TextBox Width="150"/>
</StackPanel>
</StackPanel>
I prefer Grid defintion than StakPanel. You can easily design your application with that method, just cut each area in many smaller area. Use Auto and * to define proportion.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="Label" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" />
<Label Content="Label" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" />
<TextBox Text="Text here !" Grid.Row="1" Grid.Column="0" />
<TextBox Text="Text here !" Grid.Row="1" Grid.Column="1" />
</Grid>
<Grid Grid.Row="1">
<Label Content="I need this kind of location" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Grid>
Grid should do what you need:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Name="lblTextBlock1" Text="Text Block" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBox Text="TextBlock1" Grid.Row="1" Margin="5,0,0,0" MaxHeight="20" MinWidth="100" MaxLength="4" MaxWidth="40"></TextBox>
<TextBlock Grid.Column="1" Name="lblTextBlock2" Text="Text Block" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBox Grid.Column="1" Text="TextBlock2" Grid.Row="1" Margin="5,0,0,0" MaxHeight="20" MinWidth="100" MaxLength="4" MaxWidth="40"></TextBox>
</Grid>