I have a grid that contains one ItemsControl with another grid. I would like to align the two splitters in the two grids. I have implement Grid.SharedSizeScope but this option shared only the column of the grid is located. Do you have any suggestions?
This is my xaml code.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Col1"/>
<ColumnDefinition Width="5" SharedSizeGroup="Col2"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="{StaticResource GridRowHeight}"/>
<RowDefinition Height="{StaticResource GridRowHeight}"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="2" HorizontalAlignment="Left" Width="5" VerticalContentAlignment="Stretch" IsTabStop="False"/>
<TextBlock Name="ID" Grid.Row="0" Grid.Column="0" Text="ID"/>
<TextBox Name="TxtID" Grid.Row="0" Grid.Column="2" TabIndex="0" Text={Binding ID}/>
<TextBlock Name="Description" Grid.Row="1" Grid.Column="0" Text="Description"/>
<TextBox x:Name="TxtDescription" Grid.Row="1" Grid.Column="2" Grid.RowSpan="1" Text="{Binding Description, UpdateSourceTrigger=LostFocus}"/>
<ItemsControl ItemsSource="{Binding MyList}" Grid.IsSharedSizeScope="True" IsTabStop="False"
Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Col1"/>
<ColumnDefinition Width="5" SharedSizeGroup="Col2"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="2147483647" Width="5" HorizontalAlignment="Left" VerticalContentAlignment="Stretch" IsTabStop="False"/>
<TextBlock Name="Type" Grid.Column="0" Grid.Row="0" Text="{Binding Type}"/>
<ComboBox Grid.Row="0" Grid.Column="2" ItemsSource="{Binding Source={StaticResource Types}}" SelectedItem="{Binding MyType}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
ok, what if you will actually take out the itemscontrol and move it outside the grid and then put everything into dockpanel ?
<DockPanel Grid.IsSharedSizeScope="True">
<Grid DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Col1"/>
<ColumnDefinition Width="5" SharedSizeGroup="Col2"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="2" HorizontalAlignment="Left" Width="5" VerticalContentAlignment="Stretch" IsTabStop="False"/>
<TextBlock Name="ID" Grid.Row="0" Grid.Column="0" Text="ID"/>
<TextBox Name="TxtID" Grid.Row="0" Grid.Column="2" TabIndex="0" Text="ID"/>
<TextBlock Name="Description" Grid.Row="1" Grid.Column="0" Text="Description"/>
<TextBox x:Name="TxtDescription" Grid.Row="1" Grid.Column="2" Grid.RowSpan="1" Text="123"/>
</Grid>
<ItemsControl IsTabStop="False"
Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Col1"/>
<ColumnDefinition Width="5" SharedSizeGroup="Col2"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="2147483647" Width="5" HorizontalAlignment="Left" VerticalContentAlignment="Stretch" IsTabStop="False"/>
<TextBlock Name="Type" Grid.Column="0" Grid.Row="0" Text="123"/>
<ComboBox Grid.Row="0" Grid.Column="2"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DockPanel>
I can't seem to set up the scrollview right. I can use scrollbar scrollview or whatever, I just want the scroll function.
Code:
<ScrollViewer>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</ScrollViewer>
Not sure what I'm doing wrong.
You can only use Grid.RowDefinitions under a grid:
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="65" />
<RowDefinition Height="65" />
<RowDefinition Height="30" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</Grid>
</ScrollViewer>
I suspect that was your problem.
Simplified example:
You can use just one scroll viewer for the entire page. This scroll viewer can have a grid with several rows (or columns). Then you can add any control and assign them to a row:
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="1" Grid.Row="0" FontSize="400"/>
<TextBlock Text="2" Grid.Row="1" FontSize="400"/>
<TextBlock Text="3" Grid.Row="2" FontSize="400"/>
</Grid>
</ScrollViewer>
To Not Shift the Whole Page
You can create a grid outside the scroll viewer like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" VerticalAlignment="Top">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="1" Grid.Row="0" FontSize="400"/>
<TextBlock Text="2" Grid.Row="1" FontSize="400"/>
<TextBlock Text="3" Grid.Row="2" FontSize="400"/>
</Grid>
</ScrollViewer>
<Grid Grid.Row="1">
<TextBlock
Text="outside of ScrollView control"
Foreground="Red" FontSize="50"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</Grid>
I realize Outlook's like scheduler. I took as the basis: http://www.codeproject.com/Articles/30881/Creating-an-Outlook-Calendar-Using-WPF-Part-2 , but my calendar should have some columns for show data by some count of users. Ofcourse, I can add some user's columns by XAML, but this is static solution and I don't know how many user's will show by my program.
How to improve this program for add dynamic count of user or may be there is some other open source WPF-control's for it?
XAML's code of Calendar style, which create 3 static column in the next:
<Style TargetType="{x:Type local:Calendar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Calendar}">
<Border Background="#E3EFFF"
BorderBrush="#6593CF"
BorderThickness="2,2,2,2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="38" />
<RowDefinition Height="22" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,0,0">
<Button Content="ToPreviousDay" Height="25" Command="{x:Static local:Calendar.PreviousDay}" Background="{x:Null}" BorderBrush="{x:Null}">
</Button>
<Button Content="ToNextDay" Height="25" Command="{x:Static local:Calendar.NextDay}" Background="{x:Null}" BorderBrush="{x:Null}">
</Button>
</StackPanel>
<Border BorderBrush="#6593CF" BorderThickness="0,0,1,1" Grid.Column="0" Grid.Row="1" />
<local:CalendarDayHeader Grid.Column="1" Grid.Row="1" x:Name="PART_DayHeader"/>
<ScrollViewer Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Visible" x:Name="PART_ScrollViewer">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<local:CalendarLedger Grid.Column="0" x:Name="PART_Ledger" Margin="0,25,0,0"/>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="User1_Column" x:Name="PART_Label"/>
<local:CalendarDay Grid.Row="1" x:Name="PART_Day" />
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="User2_Column" x:Name="PART_Label2"/>
<local:CalendarDay Grid.Row="1" x:Name="PART_Day2" />
</Grid>
<Grid Width>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="User3_Column" x:Name="PART_Label3"/>
<local:CalendarDay Grid.Row="1" x:Name="PART_Day3" />
</Grid>
</StackPanel>
</Grid>
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I want to add user's columns dynamically
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??
I have listviews which have been ordered up to down. I put grid splitters between each listview. But the grid splitters are not working. I could not find out why they aren't working.
My codes are below.
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled" CanContentScroll="True">
<ListView Margin="1" Background="Snow" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Attributes" Grid.Column="0" Grid.Row="0" Width="55" />
<local:ListViewExt Grid.Column="0" Grid.Row="1" Height="300" MinHeight="200"/>
<GridSplitter Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ResizeBehavior="PreviousAndNext" Height="4" Margin="0,0,0,35" />
<TextBlock Text="Aktivitäten" Grid.Row="3" Width="50"/>
<local:ListViewExt Grid.Column="0" Grid.Row="4" Height="300" MinHeight="200"/>
<GridSplitter Grid.Row="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="4" Margin="0,0,0,38" />
<TextBlock Text="Projekte" Grid.Column="0" Grid.Row="6" Width="50" />
<local:ListViewExt Grid.Column="0" Grid.Row="7" Height="300" MinHeight="200"/>
<GridSplitter Grid.Row="8" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="4" Margin="0,0,0,38" />
<TextBlock Text="Akcademy" Grid.Column="0" Grid.Row="9" Width="55" />
<local:ListViewExt Grid.Column="0" Grid.Row="10" Height="300" MinHeight="200"/>
</Grid>
</ListView>
</ScrollViewer>
try giving the grid splitter a Vertical Orientation