I am trying to limit the height of a DockPanel (well the content acually) to the remaining UserControl Height with a ScrollViewer in it to scroll if its too big.
I have a window wich uses a ContentController to hold the different UserControls
<Window>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<!-- 0 Menu -->
<RowDefinition Height="auto"/>
<!-- 1 Header -->
<RowDefinition Height="65"/>
<!-- 2 Content -->
<RowDefinition Height="*"/>
<!-- 3 Space -->
<RowDefinition Height="10"/>
<!-- 4 Status line -->
<RowDefinition Height="auto"/>
<!-- 5 Space -->
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<!--...-->
<ContentPresenter Content="{Binding Path=MainWindowContent}" Grid.Column="0" Grid.Row="2"/>
<!--...-->
</Grid>
</Window>
The UserControl wich I having trouble with is just a search for users and the output of the results. It does look like this:
<UserControl>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.Row="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition />
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="25"/>
<RowDefinition Height="auto" />
<RowDefinition Height="10" />
<RowDefinition Height="auto"/>
<RowDefinition Height="10"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- input fields -->
<DockPanel Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="6" LastChildFill="True" VerticalAlignment="Stretch" Background="{StaticResource PrimaryCorporateBrush}">
<TextBlock Style="{StaticResource HeadlineOutputLabel}" DockPanel.Dock="Top"/>
<Separator Opacity="0" Height="10" DockPanel.Dock="Top"/>
<TextBlock Visibility="{Binding Path=HasResult, Converter={StaticResource Bool2RevertedVisibility}}" Margin="10" DockPanel.Dock="Top"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="{Binding Path=HasResult, Converter={StaticResource Bool2Visibility}}">
<ItemsControl ItemsSource="{Binding Path=Members}" VerticalAlignment="Stretch">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Tag="{Binding}">
<!-- Result Element -->
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DockPanel>
</Grid>
</Border>
</Grid>
<Grid Grid.Column="3" Grid.Row="1">
<!-- info display -->
</Grid>
</Grid>
</UserControl>
I intent to limit the Results ScrollViewer height to the remaining visible space of the window, and if the results exceed it to display a scrollbar. But right now the DockPanel keeps extending the ScrollViewer and nested ItemsControl height till all elements are placed but does NOT show the ScrollBar.
I am a bit lost here why it does that, shouldn't the DockPanel limit the Height to the visible space? tried it with putting buttons instead of ItemsControl, nothing no ScrollBar.
I found the solution!
Further up in the Grid structure there was a row set to "auto" instead of "*" and ScrollViewer seems to only function properly with latter.
Related
I want to ask,if this is possible,in my case I have 2 columns and 2 rows,every part contains a Grid like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
</Grid>
<Grid Grid.Column="1" Grid.Row="0">
</Grid>
<Grid Grid.Column="1" Grid.Row="0">
</Grid>
<Grid Grid.Column="1" Grid.Row="1">
</Grid>
</Grid>
I want when I hover on one Grid,the other Grids and their components will be disabled,I have search for a property like "IsEnabled="False"" for Grids,but I didn't found any resources on the net
I have used "IsHitTestVisible="False"" property but it's not the result what I want,
so any help please,to achieve what I want
thanks for Help
I've created a TabItem with a default layout that have 3 columns and one row. Inside the first column I've inserted a StackPanel and put inside another Grid that have 3 columns and 3 rows. Now the problem's that inside the second Grid I've created a GroupBox with a StackPanel and I've set Grid.Column="2" but the controls inside the GroupBox doesn't go in the second column of the second Grid and I don't know what am I doing wrong. This is my code:
<TabItem Header="Confronto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GroupBox Header="Informazioni Squadre" Height="Auto" Grid.ColumnSpan="3" Grid.RowSpan="3">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Grid.Column="2">
<Label Content="Inter" FontWeight="Bold"></Label>
<Canvas Height="75" Width="75" Background="Gray"></Canvas>
<Label Content="Italia" Margin="0,15,0,0"></Label>
<Label Content="Serie A" Margin="0,10,0,0"></Label>
<Label Content="97%" Margin="0,10,0,0"></Label>
</StackPanel>
</GroupBox>
</Grid>
</StackPanel>
</Grid>
</TabItem>
As mentioned in the comment you can set Grid.Column and Grid.Row only on direct children of the Grid. Your inner Grid has only one direct child (GroupBox) and Grid.Column \ Grid.Row will work only on that element.
You can reverse the order and put inner Grid inside GroupBox. As a side not Grid.Column="2" will put it in the 3rd column of the inner Grid not the second (it's indexed from 0)
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<GroupBox Header="Informazioni Squadre" Height="Auto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Grid.Column="2">
<Label Content="Inter" FontWeight="Bold"></Label>
<Canvas Height="75" Width="75" Background="Gray"></Canvas>
<Label Content="Italia" Margin="0,15,0,0"></Label>
<Label Content="Serie A" Margin="0,10,0,0"></Label>
<Label Content="97%" Margin="0,10,0,0"></Label>
</StackPanel>
</Grid>
</GroupBox>
</StackPanel>
</Grid>
I'm trying to create a sizable column that contains also horizontal gridsplitter.
The code is XAML for WPF:
<DockPanel Name="dockPanel1" LastChildFill="True" >
<Grid Name="D1G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Content="Toppie" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G2" ShowGridLines="False" DockPanel.Dock="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="Bottom" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G3" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="2" Background="#FFBCBCBC"/>
<DockPanel Name="dockPanel2" DockPanel.Dock="Left" Grid.Column="0">
<Grid Name="D2G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Stretch"
Grid.Row="1" Grid.ColumnSpan="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<Label Content="D2Row0" Grid.Row="0" />
<!-- separator at Row1 -->
<Label Content="D2Row2" Grid.Row="2" />
</Grid>
</DockPanel>
</Grid>
</DockPanel>
I can create one of them separate. But I want both.
To make more grids in a form, I use the dockpanel. Maybe this isn't necessary, but if I don't it generates errors.
Where do I go wrong? Anyone has a clue?
Try this :
<DockPanel Name="dockPanel1" LastChildFill="True" >
<Grid Name="D1G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Content="Toppie" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G2" ShowGridLines="False" DockPanel.Dock="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="Bottom" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G3" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="2" Background="#FFBCBCBC"/>
<DockPanel Name="dockPanel2" DockPanel.Dock="Left" Grid.Column="0">
<Grid Name="D2G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Row="1" ResizeBehavior="PreviousAndNext" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="#FFBCBCBC" Height="2"/>
<Label Content="D2Row0" Grid.Row="0" />
<!-- separator at Row1 -->
<Label Content="D2Row2" Grid.Row="2" />
</Grid>
</DockPanel>
</Grid>
</DockPanel>
Hello and thanks for your help in advance. I have two panels, one with a series of the buttons and a Telerik RadTreeView boxed by a border, and on the right another border encompassing a grid and some other controls. Everything is sized properly as I resize the page etc however for some reason there are about 10 pixels being cut-off and cannot think of why. If it was a page container issue it would affect the border on the right side of the page. So I'm thinking it must have something to do with the RadTreeView or WrapPanel I'm using. (Boiled-down code is right after the image below)
<!-- Code -->
<controls:ViewBase xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:WindowControls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" x:Name="titleTxt" Text="My Title" Style="{StaticResource textBlockHeaderStyle}"/>
<toolkit:WrapPanel Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" MaxWidth="400" Margin="2,2,2,10">
<!-- Some Buttons Here.... -->
<telerik:RadTreeView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SelectionMode="Single" IsLineEnabled="True"
ItemsOptionListType="None" IsOptionElementsEnabled="True" IsDragDropEnabled="False"
IsRootLinesEnabled="True" Margin="0,5,0,0" IsTriStateMode="True" FontSize="11" BorderThickness="1" BorderBrush="Black"/>
</toolkit:WrapPanel>
<sdk:GridSplitter Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Stretch" Style="{StaticResource gridSplitterStyle}"/>
<Border Grid.Row="1" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Background="Transparent" BorderThickness="1" BorderBrush="Black">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- Some Buttons Here.... -->
</Grid>
<telerik:RadGridView Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
</Grid>
</Border>
</Grid>
Didn't have time nor the inclination to look into the underlying template/styling for either the RadTreeView or the WrapPanel. I was able to fix the issue and maintain the layout by simply putting the RadTreeView in it's own row and leaving just the buttons and other controls in the wrap panel. Suppose it is simpler this way anyway.
Definitely must be a bug or compatibility issue with these two controls that will probably go unsolved.
I'd like to create a custom WPF accordion-like control without using WPF toolkit... After some searching it seems like the best approach would be to use an Expander... so I wanted to just see if I could get some sort of basic functionality like getting a row to expand upward to show some content when it is expanded and then to have it collapse and hide that content. It seems like it should be pretty straight-forward but my expander never expands. Here's my basic example:
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height="24"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="215"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Expander Grid.Row="3" Grid.ColumnSpan="2" Header="More Options" ExpandDirection="Down" Background="Red" IsExpanded="False">
<StackPanel Height="300">
<CheckBox Margin="4" Content="Option 1" />
<CheckBox Margin="4" Content="Option 2" />
<CheckBox Margin="4" Content="Option 3" />
</StackPanel>
</Expander>
</Grid>
Update your RowDefinitions. Currently, the Row that the Expander is in is hard-coded to have a Height of 24. Make it Auto.
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>