Horizontal Scrolling Issue - c#

I'm new to WPF and I'm trying to create an dashboard interface for an app I'm developing. My problem is as follows;
I have a datagrid which will contain my data. This datagrid is inside a grid because I needed superheaders over particular sections. I inserted a test row into the data table and it shows up fine, but the datagrid element inside the grid seems to have its own scrollbar. Both the super header row and the datagrid row extend off the window but only the datagrid row scrolls. The 2 visible super headers stay in the same place while the datagrid row scrolls. Below is my xaml code to generate the interface. I have tried wrapping the grid in a scrollviewer and also setting the horizontal scrollbar of the row with the super headers to visible but nothing has worked so far. If I can get the super headers to scroll at all at least I can try to make an event handler to move the super headers when the datagrid scrollbar is moved. Sorry if this seems kinda garbled but I haven't had my coffee yet and I also have a migraine, 2 of the best things for a programmer to experience.
Thanks in advance
<Canvas HorizontalAlignment="Center" Height="508" VerticalAlignment="Top" Width="1366" Margin="-4,4,2,-7">
<Grid Canvas.Top="2">
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" ScrollViewer.CanContentScroll="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ElementName=grid, Path=RowHeaderWidth}" />
<ColumnDefinition Width="{Binding ElementName=TypeCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=NCRCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=StatusCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=PStkCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=DfStkCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=QtyCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=DfCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=DfDateCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=b1, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=CCodeCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=ByCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=InvAssignCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=InvCommentsCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=b2, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=CStepNoCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=CActionCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=CAssignCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=CReqCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=CComplCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=MCostCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=LabourCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=b3, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=PStepCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=PActionCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=PAssignedCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=PReqCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=PCompCol, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=PDateCol, Path=ActualWidth}" />
</Grid.ColumnDefinitions>
<TextBlock Text="INVESTIGATION" Height="20" Grid.Column="10" Grid.ColumnSpan="5" Grid.Row="0"/>
<TextBlock Text="CORRECTIVE ACTION" Height="20" Grid.Column="15" Grid.ColumnSpan="8" Grid.Row="0" />
<TextBlock Text="PREVENTATIVE ACTION" Height="20" Grid.Column="23" Grid.ColumnSpan="6" Grid.Row="0"/>
</Grid>
<DataGrid x:Name="grid" Grid.Row="1" Grid.Column="0" CanUserAddRows="False" HorizontalAlignment="Center" VerticalAlignment="Top" Width="1524" Canvas.Top="44" HeadersVisibility="Column" AutoGenerateColumns="False" CanUserReorderColumns="False" CanUserResizeColumns="False" Canvas.Left="-180" CellEditEnding="grid_CurrentCellChanged" Margin="0,0,881,0">
<DataGrid.Columns>
<DataGridTextColumn x:Name="TypeCol" Binding="{Binding Type}" Header="Type" Width="50" IsReadOnly="True"/>
<DataGridTextColumn x:Name="NCRCol" Binding="{Binding NCR}" Header="NCR" Width="100" IsReadOnly="True"/>
<DataGridTextColumn x:Name="StatusCol" Binding="{Binding Status}" Header="Status" Width="50"/>
<DataGridTextColumn x:Name="PStkCol" Binding="{Binding PStkCode}" Header="Parent Stock Code" Width="120 " IsReadOnly="True"/>
<DataGridTextColumn x:Name="DfStkCol" Binding="{Binding DfStkCode}" Header="Defective Stock Code" Width="125" IsReadOnly="True"/>
<DataGridTextColumn x:Name="QtyCol" Binding="{Binding Qty}" Header="Quantity" Width="120" IsReadOnly="True"/>
<DataGridTextColumn x:Name="DfCol" Binding="{Binding Defect}" Header="Defect" Width="100" IsReadOnly="True"/>
<DataGridTextColumn x:Name="DfDateCol" Binding="{Binding Defect Date}" Header="Defect Date" Width="100" IsReadOnly="True"/>
<DataGridTemplateColumn x:Name="b1" Width="20" IsReadOnly="True"/>
<DataGridTextColumn x:Name="CCodeCol" Header ="Cause Code" Width ="80" />
<DataGridTextColumn x:Name="ByCol" Header ="By" Width ="80"/>
<DataGridTextColumn x:Name="InvAssignCol" Header ="Assigned To" Width ="100" />
<DataGridTextColumn x:Name="InvCommentsCol" Header ="Comments" Width ="100" />
<DataGridTemplateColumn x:Name="b2" Width="20" IsReadOnly="True"/>
<DataGridTextColumn x:Name="CStepNoCol" Header ="Step No" Width ="60" />
<DataGridTextColumn x:Name="CActionCol" Header ="Action" Width ="100" />
<DataGridTextColumn x:Name="CAssignCol" Header ="Assigned To" Width ="100"/>
<DataGridTextColumn x:Name="CReqCol" Header ="Reqd By" Width ="100" />
<DataGridTextColumn x:Name="CComplCol" Header ="Completed By" Width ="100"/>
<DataGridTextColumn x:Name="MCostCol" Header="Material Cost($)" Width="100"/>
<DataGridTextColumn x:Name="LabourCol" Header="Labour (Hrs)" Width="100"/>
<DataGridTemplateColumn x:Name="b3" Width="20" IsReadOnly="True"/>
<DataGridTextColumn x:Name="PStepCol" Header="Step No" Width="60"/>
<DataGridTextColumn x:Name="PActionCol" Header="Action" Width="100"/>
<DataGridTextColumn x:Name="PAssignedCol" Header="Assigned To" Width="100"/>
<DataGridTextColumn x:Name="PReqCol" Header="Reqd By" Width="100"/>
<DataGridTextColumn x:Name="PCompCol" Header="Completed By" Width="100"/>
<DataGridTextColumn x:Name="PDateCol" Header="Completed Date" Width="100"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Canvas>

Rather than trying to match the columns and ScrollBars of the DataGrid in a Grid that has no relation to it, just define the DataGrid header however you want to. You can use the HeaderTemplate property of a DataGrid.DataGridTemplateColumn... maybe something like this:
<DataGrid ItemsSource="{Binding Items}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Top Header" />
<TextBlock Grid.Row="1" Text="Bottom Header" />
</Grid>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>

Related

how to correct columns and rows that nicely displays datagrid?

I am working on some view in wpf mvvm. I don't know how to fix columns and rows to show correctly my datagrid. I want to have one textbox under name, one textbox under value
Here is a image and xaml code, can anybody help me?
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<DataGrid ItemsSource="{Binding EnviromentVariables}" IsReadOnly="False" Margin="10" AutoGenerateColumns="False" Grid.ColumnSpan="4">
<DataGrid.Columns>
<DataGridTextColumn x:Name="name" Width="*" Header="Name" Binding="{Binding Name}" />
<DataGridTextColumn x:Name="value" Width="*" Header="Value" Binding="{Binding Value}" />
</DataGrid.Columns>
</DataGrid>
<StackPanel Orientation="Horizontal" Grid.Row="1">
<TextBox Grid.Row="1" Grid.Column="1" Width="{Binding ElementName =name}" />
<TextBox Grid.Row="1" Grid.Column="3" Width="{Binding ElementName= value}"/>
<Button Content="+" Grid.Column="2" Grid.Row="2" />
<Button Content="-" Grid.Column="3" Grid.Row="2" />
</StackPanel>
</Grid>
Try first of all removing the StackPanel, because, even if you use Grid.Row and Grid.Column properties nothing will effect:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<DataGrid ItemsSource="{Binding EnviromentVariables}" IsReadOnly="False" Margin="10" AutoGenerateColumns="False" Grid.ColumnSpan="4">
<DataGrid.Columns>
<DataGridTextColumn x:Name="name" Width="*" Header="Name" Binding="{Binding Name}" />
<DataGridTextColumn x:Name="value" Width="*" Header="Value" Binding="{Binding Value}" />
</DataGrid.Columns>
</DataGrid>
<TextBox Grid.Row="1" Grid.Column="0" Width="{Binding ElementName =name}" Grid.ColumnSpan="2" Margin="10,0,0,0"/>
<TextBox Grid.Row="1" Grid.Column="2" Width="{Binding ElementName= value}" Grid.ColumnSpan="2" Margin="0,0,10,0"/>
<Button Content="+" Grid.Column="2" Grid.Row="2" />
<Button Content="-" Grid.Column="3" Grid.Row="2" />
</Grid>
Remember to adjust margin of Textboxes.

WPF -- Expander when collapsed does not resize other grid columns

I am trying to collapse expander when when it collapse the other grid columns doesnot take up space.
I tried this in expander_collapsed, the grids are taking the whole space but then I am not able access expander only to make it expand.
private void Expander_Expanded(object sender, RoutedEventArgs e)
{
groupBoxMain.Visibility = Visibility.Visible;
}
private void Expander_Collapsed(object sender, RoutedEventArgs e)
{
MainGrid.ColumnDefinitions[0].Width = new GridLength(1, GridUnitType.Star);
groupBoxMain.Visibility = Visibility.Hidden;
}
xaml code:
<Grid x:Name="MainGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="177*"/>
<ColumnDefinition Width="133*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="8*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="680*"/>
<RowDefinition Height="31*"/>
</Grid.RowDefinitions>
<GroupBox Name="groupBoxMain" BorderBrush="Black" Grid.ColumnSpan="3" Grid.Column="1" Grid.Row="0" Margin="0,0,0,6">
<DataGrid Background="DarkGray" CanUserResizeColumns="True" CanUserSortColumns="True">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding BackupVersionNumber}" Header="File Name" MinWidth="100" FontFamily="Default Font" FontSize="16"/>
<DataGridTextColumn Binding="{Binding BackupDateTime}" Header="Total Time" MinWidth="100" FontFamily="Default Font" FontSize="16"/>
<DataGridTextColumn Binding="{Binding SavedBy}" Header="Total Packet" MinWidth="100" FontFamily="Default Font" FontSize="16"/>
</DataGrid.Columns>
</DataGrid>
</GroupBox>
<Expander ExpandDirection="Right" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="0" IsExpanded="True" Width="35" Grid.Row="0" Expanded="Expander_Expanded" Collapsed="Expander_Collapsed">
<Expander.Header>
<TextBlock Text="Select Manifest File" Width="Auto"
FontSize="11">
<TextBlock.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</TextBlock.LayoutTransform>
</TextBlock>
</Expander.Header>
<Grid Background="#FFE5E5E5" Width="0"/>
</Expander>
</Grid>
<Grid HorizontalAlignment="Stretch" Grid.Column="1" Grid.ColumnSpan="2" VerticalAlignment="Stretch" Height="Auto" Width="Auto" Margin="2,0,0,0.2">
<Grid Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="6" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,10.4,0.267,0.2" Background="{DynamicResource {x:Static SystemColors.AppWorkspaceBrushKey}}" />
</Grid>
</Grid>
I have 3 columns in my main grid. One is expander and other 2 are grid.
I want the other two columns to take up the space when expander is collapsed.
First, I think your GroupBox should be in your Expander. You need to fix your grid rows, because those are broken--there is no Grid.Row="3". You need to change the Width to Auto on your Grid in Column 0 in your MainGrid. There are probably other things that need attention, but this should help you get a start on figuring out what you need to do:
<Grid x:Name="MainGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="177*" />
<ColumnDefinition Width="133*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="680*" />
<RowDefinition Height="31*" />
</Grid.RowDefinitions>
<Grid Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Expander ExpandDirection="Right"
Grid.Column="0"
IsExpanded="True">
<Expander.Header>
<TextBlock Text="Header">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" />
</TextBlock.LayoutTransform>
</TextBlock>
</Expander.Header>
<GroupBox Name="groupBoxMain"
BorderBrush="Black"
Grid.Row="0"
Margin="0,0,0,6">
<DataGrid Background="DarkGray"
CanUserResizeColumns="True"
CanUserSortColumns="True">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding BackupVersionNumber}"
Header="File Name"
MinWidth="100"
FontFamily="Default Font"
FontSize="16" />
<DataGridTextColumn Binding="{Binding BackupDateTime}"
Header="Total Time"
MinWidth="100"
FontFamily="Default Font"
FontSize="16" />
<DataGridTextColumn Binding="{Binding SavedBy}"
Header="Total Packet"
MinWidth="100"
FontFamily="Default Font"
FontSize="16" />
</DataGrid.Columns>
</DataGrid>
</GroupBox>
</Expander>
</Grid>
<Grid Grid.Column="1"
Grid.ColumnSpan="2"
Height="Auto"
Width="Auto"
Margin="2,0,0,0.2">
<Grid Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="6"
Margin="0,10.4,0.267,0.2"
Background="{DynamicResource {x:Static SystemColors.AppWorkspaceBrushKey}}" />
</Grid>
</Grid>

binding datagrid column to selecteditem property

I have a datagrid where if a row is clicked upon the row details is shown. In the row details is another datagrid called dgRights.
So dgRights is bound to SelectItem.Funds where funds is a custom list. dgRights show 4 columns, 3 of which are bound fine however the fourth isn't (in my code below its called "Rights Sedol").
I want the column Rights Sedol to be bound to a property of the selectedItem not selectedItem.Funds, is this possible?
I've tried the lines of code below without luck,
<DataGridTextColumn Header="Rights Sedol" Binding="{Binding SelectedItem.NewSecurity.Sedol, RelativeSource={RelativeSource AncestorType=Window}}/>
2nd
<DataGridTextColumn Header="Rights Sedol" Binding="{Binding SelectedItem.NewSecurity.Sedol, RelativeSource={RelativeSource AncestorType=DataGrid}}/>
I also tried changing the ItemSource of the datagrid from SelectedItem.Funds to just SelectItem & changed the other 3 working columns to Funds.Code etc but this didn't display any data in the datagrid at all. So not sure what to do?
App.xaml - my row details data template
<DataTemplate x:Key="DG_RowDetailRGHTSHist">
<Grid x:Name="RowDetailGrid"
Margin="5"
HorizontalAlignment="Left">
<Border HorizontalAlignment="Left"
VerticalAlignment="Top"
Height="250"
CornerRadius="5">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Transparent"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Margin="5,5,5,5"
HorizontalAlignment="Left"
FontSize="12"
FontWeight="Bold"
Foreground="Black"
Text="Fund Summary">
</TextBlock>
<DataGrid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
ItemsSource="{Binding SelectedItem.Funds, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
RowStyle="{StaticResource DG_Row}"
ColumnHeaderStyle="{StaticResource DG_ColumnHeader}"
RowHeaderStyle="{StaticResource DG_RowHeaderNested}"
CellStyle="{StaticResource DG_Cell}"
Background="Silver"
HorizontalGridLinesBrush="LightGray"
VerticalGridLinesBrush="LightGray"
CanUserAddRows="False"
CanUserDeleteRows="False"
Margin="50,5,5,20"
AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Fund Code" Binding="{Binding Code}" IsReadOnly="True" MinWidth="75"/>
<DataGridTextColumn Header="Fund Code SS" Binding="{Binding CodeSS}" IsReadOnly="True" MinWidth="75"/>
<DataGridTextColumn Header="Rights Sedol" Binding="{Binding SelectedItem.NewSecurity.Sedol, RelativeSource={RelativeSource AncestorType=Window}}" IsReadOnly="True" MinWidth="75"/>
<DataGridTextColumn Header="Number of Rights" Binding="{Binding CurrentNominal, Mode=TwoWay, StringFormat={}{0:N0}}" IsReadOnly="True"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Border>
</Grid>
</DataTemplate>
You want to access the 2nd datagrid up so you need to specify AncestorLevel=2.
{RelativeSource AncestorType=DataGrid, AncestorLevel=2}}

binding to datepicker in datagrid rowdetails

I have a datagrid. When a row is click on the rowdetails is shown. In the rowdetails I have another datagrid next to the datagrid is a DatePicker.
So the main datagrid has a collection of a custom object. When a row is clicked the sub datagrid is bound to the selecteditem.Funds (another list) (code shown below). The selectedItem also has a datetime property which I want to bind to my DatePicker however I cannot get it to work.
I am using the line below,
<DatePicker SelectedDate="{Binding SelectedItem.DateEffective2, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
I assumed (maybe wrongly that because the datepicker is in the rowdetails I would be able to bind to the selectedItem, guess I'm wrong?
<DataGrid Grid.Row="1"
ItemsSource="{Binding HldLogEQCurr, UpdateSourceTrigger=PropertyChanged}"
SelectedItem="{Binding SelectedHldLogEq, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource DataGridTemplate1}"
ColumnHeaderStyle="{StaticResource DG_ColumnHeaderCenter1}"
RowStyle="{StaticResource DG_Row1}"
CellStyle="{StaticResource DG_Cell1}"
RowHeaderStyle="{StaticResource DG_RowHeader1}"
AutoGenerateColumns="False"
HorizontalAlignment="Stretch"
Background="Silver"
Margin="50,50,50,50"
CanUserDeleteRows="False"
CanUserAddRows="False"
RowHeaderWidth="30">
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<Grid x:Name="RowDetailGrid"
Margin="5"
HorizontalAlignment="Left">
<Border HorizontalAlignment="Left"
VerticalAlignment="Top"
Height="250"
CornerRadius="5">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Transparent"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"/>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Margin="5,5,5,5"
HorizontalAlignment="Left"
FontSize="12"
FontWeight="Bold"
Foreground="Black"
Text="Select action to take">
</TextBlock>
<DataGrid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
ItemsSource="{Binding SelectedItem.Funds, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
RowStyle="{StaticResource DG_Row}"
ColumnHeaderStyle="{StaticResource DG_ColumnHeader}"
RowHeaderStyle="{StaticResource DG_RowHeaderNested}"
CellStyle="{StaticResource DG_Cell}"
Background="Silver"
HorizontalGridLinesBrush="LightGray"
VerticalGridLinesBrush="LightGray"
CanUserAddRows="False"
CanUserDeleteRows="False"
Margin="50,5,5,20"
AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Fund Code" Binding="{Binding Code}" IsReadOnly="True" MinWidth="75"/>
<DataGridTextColumn Header="Fund Code SS" Binding="{Binding CodeSS}" IsReadOnly="True" MinWidth="75"/>
<DataGridTextColumn Header="Number of Rights" Binding="{Binding CurrentNominal, StringFormat={}{0:N0}}" IsReadOnly="True"/>
<DataGridTextColumn Header="Rights To Exercise" Binding="{Binding NewNominal, StringFormat={}{0:N0}}" IsReadOnly="True"/>
<DataGridCheckBoxColumn Header="Take Cash" Binding="{Binding OptionOne, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" IsReadOnly="False"/>
<DataGridCheckBoxColumn Header="Take Stock" Binding="{Binding OptionTwo, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" IsReadOnly="False"/>
<DataGridCheckBoxColumn Header="Take Both" Binding="{Binding OptionThree, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" IsReadOnly="False"/>
</DataGrid.Columns>
</DataGrid>
<Grid Grid.Column="2" Grid.Row="0" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180"/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" Grid.Column="2" Margin="20,0,0,0">
<TextBlock Margin="0,5,5,5" HorizontalAlignment="Left" FontSize="12" FontWeight="Bold" Foreground="Black"
Text="Select Date Effective From"/>
<DatePicker HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,10,0,0"
BorderThickness="0" SelectedDate="{Binding SelectedItem.DateEffective, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="200"/>
</StackPanel>
</Grid>
</Grid>
</Border>
</Grid>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
<DataGrid.Columns>
<DataGridTextColumn Header="Date Entered" IsReadOnly="True" Binding="{Binding DateEntered, StringFormat={}\{0:dd-MMM-yy\}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MinWidth="75"/>
<DataGridTextColumn Header="Date Effective" IsReadOnly="True" Binding="{Binding DateEffective, StringFormat={}\{0:dd-MMM-yy\}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MinWidth="75"/>
<DataGridTextColumn Header="Sedol" IsReadOnly="True" Binding="{Binding Security.Sedol}" MinWidth="75"/>
<DataGridTextColumn Header="Name" IsReadOnly="True" Binding="{Binding Security.Name}" MinWidth="200"/>
<DataGridTextColumn Header="Ratio" IsReadOnly="True" Binding="{Binding RatioNew}" MinWidth="75"/>
</DataGrid.Columns>
</DataGrid>
The DataContext for the DatePicker should already be the SelectedItem, try changing it to:
<DatePicker SelectedDate="{Binding DateEffective2, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
Also, your sub-DataGrid's ItemsSource could be simplified from:
ItemsSource="{Binding SelectedItem.Funds, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
To:
ItemsSource="{Binding Funds}"

ContentControl inside TabItem doesn't resize proberly

I have a ContentControl inside a TabItem. The ContentControl displays a UserControl. My Problem is the Width of the ContentControl isn't set corectly, it is way to big. The Height is correctly displayd.
I want to SizeToContent because I have multiple TabItems with different sizes.
I have the following code:
MainWindow.xaml (Short Version)
<Window Height="350" Width="525" SizeToContent="WidthAndHeight">
<DockPanel>
<TabControl DockPanel.Dock="Left" TabStripPlacement="Left">
<TabItem Header="BDE Config" IsEnabled="{Binding LoggedIn}">
<Grid>
<ContentControl Content="{Binding CurrentViewModel}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
</TabItem>
</TabControl>
</DockPanel>
The UserControl doesn't has Width/Height Properties. So why is it that the Height is correct but the Width way to big for my Screen.
XAML of the UserControl:
<UserControl x:Class="BDE_Config2015.Views.BDEConfig"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:BDE_Config2015"
xmlns:h="clr-namespace:BDE_Config2015.Helpers"
mc:Ignorable="d"
Background="{StaticResource AppBg}" d:DesignHeight="655" d:DesignWidth="1180">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!--1-->
<GroupBox Grid.Column="0" Grid.Row="0" Header="BDE-Benutzer">
<ComboBox Height="23" DisplayMemberPath="Benutzername" SelectedValuePath="Kbez" ItemsSource="{Binding BDEConfigModel.BDEBenutzer}" SelectedValue="{Binding CurrentUser}" />
</GroupBox>
<!--2-->
<TabControl Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Background="Transparent" Margin="0,3,0,0">
<TabItem Header="BDE">
<Grid x:Name="gBDEKonfig">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!--Row 0-->
<TextBlock Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Text="Buttons pro Reiter" VerticalAlignment="Center" Visibility="Collapsed" />
<TextBox Grid.Column="2" Grid.Row="0" Name="txtBDEReiter" Margin="0,0,0,5" Visibility="Collapsed" />
<TextBlock Grid.Column="3" Grid.Row="0" Text="Hintergrundfarbe" VerticalAlignment="Center" Margin="10,0,0,0" Visibility="Collapsed" />
<TextBox Grid.Column="4" Grid.Row="0" Margin="0,0,0,5" Visibility="Collapsed" />
<Button Grid.Column="5" Grid.Row="0" Margin="10,0,0,5" Visibility="Collapsed">...</Button>
<!--Row 1-->
<TextBlock Grid.Column="0" Grid.Row="1" Text="BDE-Titel" VerticalAlignment="Top"/>
<TextBox Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="1" Margin="0,0,0,5" Text="{Binding BDETitel, UpdateSourceTrigger=LostFocus}" KeyDown="TextBox_KeyDown" />
<!--Row 2-->
<TextBlock Grid.Column="0" Grid.Row="2" Text="BDE-Belegung"/>
<!--Row 3-->
<DataGrid Grid.Column="0" Grid.ColumnSpan="8" Grid.Row="3" ItemsSource="{Binding BDEConfigModel.Clientoptionen}" AutoGenerateColumns="False" CanUserAddRows="False" CanUserReorderColumns="False"
SelectedValue="{Binding crBDEBelegung}" Name="dgvBDEBelegung" CellEditEnding="DGV_CellEditEnding" CurrentCellChanged="DGV_CurrentCellChanged"
h:DataGridBehavior.AutoScrollIntoView="True" SelectionMode="Single">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Nummer, UpdateSourceTrigger=LostFocus}" Header="Nr" />
<DataGridTextColumn Binding="{Binding OptionText, UpdateSourceTrigger=LostFocus}" Header="Arbeitsplatztitel" />
<DataGridTextColumn Binding="{Binding OptionInfo, UpdateSourceTrigger=LostFocus}" Header="Buttonbezeichnung"/>
<DataGridTemplateColumn Header="Anlage" Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox DisplayMemberPath="Anlage" SelectedValuePath="FertigungsStättenID" SelectedValue="{Binding OptionZahl}" IsTextSearchEnabled="True"
ItemsSource="{Binding Path=DataContext.BDEConfigModel.Fertigungsstaette, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
SelectedItem="{Binding Path=DataContext.siFertigungsstaette, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Mode=OneWayToSource}">
</ComboBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Arbeitsplatz" Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox DisplayMemberPath="Arbeitsplatzbez" SelectedValuePath="ArbeitsPlatzNummer" SelectedValue="{Binding OptionGanzzahl}" IsTextSearchEnabled="True"
ItemsSource="{Binding Path=DataContext.BDEConfigModel.Arbeitsplatz, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
SelectedItem="{Binding Path=DataContext.siArbeitsplatz, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Mode=OneWayToSource}">
</ComboBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<!--Row 4-->
<Button Grid.Column="0" Grid.Row="4" Margin="5" Command="{Binding NeuBDEBelegungCommand}">Neu</Button>
<Button Grid.Column="1" Grid.Row="4" Margin="5" Command="{Binding LoeschenBDEBelegungCommand}">Löschen</Button>
</Grid>
</TabItem>
<TabItem Header="Arbeitsgang/Arbeitsplan">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Arbeitsplan"/>
<DataGrid Grid.Row="1">
</DataGrid>
<CheckBox Grid.Row="2" HorizontalAlignment="Right" Content="Unabhängig vom Arbeitsplan" Margin="0,10,5,0" />
<TextBlock Grid.Row="3" Text="Arbeitsgang"/>
<DataGrid Grid.Row="4">
</DataGrid>
</Grid>
</TabItem>
<TabItem Header="ColumnsManagement">
<Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Arbeitsplatz" Margin="5,0" />
<ComboBox Grid.Column="1" Margin="5,0,5,5" ItemsSource="{Binding BDEConfigModel.BDEArbeitsplatz}" DisplayMemberPath="OptionText" SelectedValuePath="PKID"
SelectedValue="{Binding SelectedArbeitsplatzCM}" />
<TextBlock Grid.Column="2" Text="DataSource" Margin="5,0" />
<ComboBox Grid.Column="3" Margin="5,0,5,5" SelectedValue="{Binding SelectedDataSource}">
<ComboBox.ItemsSource>
<x:Array Type="sys:String" xmlns:sys="clr-namespace:System;assembly=mscorlib">
<sys:String>proc_BDEoW_ChargeStartDetail</sys:String>
<sys:String>proc_BDEoW_ChargeProduktion</sys:String>
</x:Array>
</ComboBox.ItemsSource>
</ComboBox>
<Button Grid.Column="4" Content="Laden" Width="85" HorizontalAlignment="Right" Margin="5,0,5,5" Command="{Binding LadenCMCommand}"/>
</Grid>
<DataGrid Grid.Row="1" ItemsSource="{Binding BDEConfigModel.ArbeitsplatzSpaltenManagement}" AutoGenerateColumns="False" CanUserAddRows="False" CanUserReorderColumns="False"
IsEnabled="{Binding EnabledCM}" SelectedValue="{Binding crArbeitsplatzSM}" h:DataGridBehavior.AutoScrollIntoView="True">
<DataGrid.Columns>
<DataGridTextColumn Width="Auto" Header="Spalte" Binding="{Binding SQLVisibleColumns}" />
<DataGridTextColumn Width="*" Header="Titel" Binding="{Binding SQLVisibleColumnsName}" />
<DataGridTextColumn Width="*" Header="%Weite" Binding="{Binding SQLVisibleColumnsWidth}" />
<DataGridTextColumn Width="*" Header="ReadOnly" Binding="{Binding SQLVisibleColumnsAccess}" />
</DataGrid.Columns>
</DataGrid>
<TextBlock Grid.Row="2" Text="{Binding MessageCM}" HorizontalAlignment="Stretch" Margin="5,0,5,0" />
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="Neu" Margin="5" Command="{Binding NeuCMCommand}" IsEnabled="{Binding EnabledCM}" />
<Button Grid.Column="1" Content="Löschen" Margin="5" Command="{Binding LoeschenCMCommand}" IsEnabled="{Binding EnabledCM}" />
<Button Grid.Column="2" Content="Con. Kopieren" Margin="5" Command="{Binding KopierenCMCommand}" IsEnabled="{Binding EnabledCM}" />
<TextBox Grid.Column="3" IsReadOnly="True" Margin="5" Text="{Binding SummeCM}"/>
<Button Grid.Column="4" Content="Speichern" Margin="5" Command="{Binding SpeichernCMCommand}" IsEnabled="{Binding EnabledCM}" />
</Grid>
</Grid>
</TabItem>
</TabControl>
<!--3-->
<GroupBox Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" Header="Modul-Info" Name="gbModulInfo" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition />
<ColumnDefinition Width="80"/>
</Grid.ColumnDefinitions>
<DataGrid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0" ItemsSource="{Binding BDEConfigModel.BDEModul}" AutoGenerateColumns="False" CanUserAddRows="False" CanUserReorderColumns="False"
SelectedValue="{Binding crModulInfo}" h:DataGridBehavior.AutoScrollIntoView="True">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Typ}" Header="Typ" IsReadOnly="True" />
<DataGridTextColumn Binding="{Binding Bezeichnung}" Header="Bezeichnung" Width="*" IsReadOnly="True" />
</DataGrid.Columns>
</DataGrid>
<Button Grid.Column="0" Grid.Row="1" Content="V Spez." Margin="5" Command="{Binding VSpezCommand}"/>
<Button Grid.Column="2" Grid.Row="1" Content="V Global" Margin="5" Command="{Binding VGlobalCommand}"/>
</Grid>
</GroupBox>
<!--4-->
<GroupBox Grid.Column="0" Grid.Row="2" Header="Register" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid Name="gRegister">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DataGrid Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0" ItemsSource="{Binding BDEConfigModel.Register}" AutoGenerateColumns="False" CanUserAddRows="False" CanUserReorderColumns="False"
SelectedValue="{Binding crRegister}" h:DataGridBehavior.AutoScrollIntoView="True" CellEditEnding="DGV_CellEditEnding" CurrentCellChanged="DGV_CurrentCellChanged">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Nummer, UpdateSourceTrigger=LostFocus}" Header="Nr" IsReadOnly="True" />
<DataGridTextColumn Binding="{Binding OptionText, UpdateSourceTrigger=LostFocus}" Header="Registername" Width="*"/>
</DataGrid.Columns>
</DataGrid>
<Button Grid.Column="0" Grid.Row="1" Content="Neu" Margin="5" Command="{Binding NeuRegisterCommand}" />
<Button Grid.Column="1" Grid.Row="1" Content="Löschen" Margin="5" Command="{Binding LoeschenRegisterCommand}" />
</Grid>
</GroupBox>
<!--5-->
<GroupBox Grid.Column="1" Grid.Row="3" Header="Spez. Modulzuordnung" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DataGrid Name="dgvMZ" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" ItemsSource="{Binding BDEConfigModel.BDEMZ}" AutoGenerateColumns="False" CanUserAddRows="False"
CanUserReorderColumns="False" SelectedValue="{Binding crMZ}" h:DataGridBehavior.AutoScrollIntoView="True" CellEditEnding="DGV_CellEditEnding" CurrentCellChanged="DGV_CurrentCellChanged">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Modul}" Header="Typ" IsReadOnly="True" />
<DataGridTextColumn Binding="{Binding Modullevel, UpdateSourceTrigger=LostFocus}" Header="Level" />
<DataGridTextColumn Binding="{Binding Parameter1, UpdateSourceTrigger=LostFocus}" Header="Parameter" Width="*" />
<DataGridTextColumn Binding="{Binding ModulSetup, UpdateSourceTrigger=LostFocus}" Header="Setup" Width="*"/>
</DataGrid.Columns>
</DataGrid>
<Button Grid.Column="0" Grid.Row="1" Content="Löschen" Margin="5" Command="{Binding LoeschenMZCommand}"/>
</Grid>
</GroupBox>
<!--6-->
<GroupBox Grid.Column="2" Grid.Row="3" Header="Global Modulzuordnung" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DataGrid Name="dgvMZGlobal" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" ItemsSource="{Binding BDEConfigModel.BDEMZGlobal}" AutoGenerateColumns="False" CanUserAddRows="False"
CanUserReorderColumns="False" SelectedValue="{Binding crMZGlobal}" h:DataGridBehavior.AutoScrollIntoView="True" CellEditEnding="DGV_CellEditEnding"
CurrentCellChanged="DGV_CurrentCellChanged">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Modul}" Header="Typ" IsReadOnly="True"/>
<DataGridTextColumn Binding="{Binding Modullevel, UpdateSourceTrigger=LostFocus}" Header="Level"/>
<DataGridTextColumn Binding="{Binding Parameter1, UpdateSourceTrigger=LostFocus}" Header="Parameter" Width="*"/>
<DataGridTextColumn Binding="{Binding ModulSetup, UpdateSourceTrigger=LostFocus}" Header="Setup" Width="*"/>
</DataGrid.Columns>
</DataGrid>
<Button Grid.Column="0" Grid.Row="1" Content="Löschen" Margin="5" Command="{Binding LoeschenMZGlobalCommand}"/>
</Grid>
</GroupBox>
</Grid>
It seems to be related to a strange interaction between the SizeToContent property on the window and the "star-sizing" on the data grid columns.
Either set the window's SizeToContent property to Height and explicitly set a width for the window, or limit the width of the star-sized columns by setting their MaxWidth properties to some suitable limit.
This thread on CodePlex describes the problem. Apparently things used to be worse in that an exception would be thrown! From a post at the very bottom of that thread:
The exception has been fixed but it's still not working properly. When placed in a user control with (sic) doesn't have a fixed width, setting "*" on column width will cause the column to be extremely wide (several thousand pixel), and this happens both at design time and run time.
As an aside, you could get rid of a lot of XAML markup by using StackPanel and DockPanel containers rather than using a Grid for everything.
After some more trying I have found an Answert that works for me. I have done the following:
MaxWidth="{x:Static SystemParameters.PrimaryScreenWidth}" WindowStartupLocation="CenterScreen" Left="{Binding winLeft, Mode=TwoWay}" Top="{Binding winTop, Mode=TwoWay}"
It sets the MaxWidth of the Window the the Screen Width and then whenever a User Control with Star-Sized Columns is loaded it also sets the Position to 0,0.

Categories

Resources