Hi,
I have a xamdatagrid with few columns, I have put ToggleButton in one column header , when you click on the ToggleButton, it expands and It shows 6 columns which were there in Collapsed state. they become visible. similarly when you click it once again, 6 expanded columns are collapsed again.
Column which has toggle button on; it is marked bold in below xaml,
and is displayed with rowspan=2 & row=0, columns with width=200 & 20 are always displayed when 6 columns are expanded they are displayed in last, when 6 columns are collapsed then these 2 columns are displayed after the column which is marked in bold.
<igDP:FieldLayoutSettings.DataRecordCellAreaGridTemplate
>
="gridDataRecordCellAreaGridTemplate">
="80"/>
="250"/>
="50"/>
="200"/>
="20"/>
Now, my problem is I want to set Column Width for each and every column, so i used DataRecordCellAreaGridTemplate, i have put ComunDefinitions for all columns, but when 6 columns are collapsed, how can I maintain the same column width i.e. 200 & 20. what happens it these 2 column are displayed with width = 50!
Please give me some solution, how can we handle the column width, some style or my guess is we can do that in code behind, i have a function named "ToggleButtonPressed" which does this job of expanding & collapsing, we could add some code there, but i dont know how to access DataRecordCellAreaGridTemplate in code behind.
Alex,
One more question, the xamdatagrid that we talked about is now placed under an Expander control.
Expander Style that I am using:-
<ControlTemplate x:Key="newToggleButtonControlTemplate" TargetType="{x:Type ToggleButton}"> <Grid Background="{TemplateBinding Background}"> <Rectangle x:Name="Rectangle" Margin="0,0,0,0" Fill="Transparent" Stroke="{DynamicResource NormalBorderBrush}"/> <Image x:Name="Up_Arrow" Width="15" Height="15" HorizontalAlignment="Left" Margin="1,1,1,1" VerticalAlignment="Stretch" Opacity="1" RenderTransformOrigin="0.5,0.5" Source="..\Images\indic.jpg"/> <Image x:Name="Down_Arrow" Width="15" Height="15" HorizontalAlignment="Left" Margin="1,1,1,1" VerticalAlignment="Stretch" Opacity="1" RenderTransformOrigin="0.5,0.5" Source="..\Images\indicC.jpg"/> <TextBlock x:Name="ExpanderHeader" Margin="20,5,10,0" FontSize="12" HorizontalAlignment="Stretch" FontWeight="Bold" Text="{Binding Path=GridHeader}"> </TextBlock> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter TargetName="Rectangle" Property="Fill" Value="{DynamicResource MouseOverBrush}"/> </Trigger> <Trigger Property="IsPressed" Value="true"> <Setter TargetName="Rectangle" Property="Fill" Value="{DynamicResource PressedBrush}"/> </Trigger> <Trigger Property="IsChecked" Value="true"> <Setter TargetName="Down_Arrow" Property="Visibility" Value="Visible"/> <Setter TargetName="Up_Arrow" Property="Visibility" Value="Collapsed"/> </Trigger> <Trigger Property="IsChecked" Value="false"> <Setter TargetName="Down_Arrow" Property="Visibility" Value="Collapsed"/> <Setter TargetName="Up_Arrow" Property="Visibility" Value="Visible"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> <Style x:Key="FlexibleDisplayExpanderStyle" TargetType="{x:Type Expander}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Expander}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="25"/> <RowDefinition x:Name="ContentRow" Height="*"/> </Grid.RowDefinitions> <Border x:Name="Border" Grid.Row="0" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0,0,0,0"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <ToggleButton Background="{TemplateBinding Background}" IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource= {RelativeSource TemplatedParent}}" OverridesDefaultStyle="True" Template="{DynamicResource newToggleButtonControlTemplate}"/> <ContentPresenter Grid.Column="1" HorizontalAlignment="Stretch" Margin="5" ContentSource="Header" RecognizesAccessKey="True"/> </Grid> </Border> <Border x:Name="ExpandSite" Grid.Row="1" BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" Visibility="Collapsed"> <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Focusable="false"/> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsExpanded" Value="True"> <Setter TargetName="ExpandSite" Property="Visibility" Value="Visible"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
and this how XAMdatagrid is placed under Expander:-
<Grid HorizontalAlignment="Left" VerticalAlignment="Stretch"> <StackPanel HorizontalAlignment="Left" Margin="10,10,10,10" VerticalAlignment="Top"> <Expander Name="GridExpander" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="#FFD9D9D9" Width="Auto" ClipToBounds="True" DataContext="{Binding ElementName=root}" HorizontalContentAlignment="Stretch" IsExpanded="True" Style="{DynamicResource FlexibleDisplayExpanderStyle}"> <StackPanel HorizontalAlignment="Stretch"> <igDP:XamDataGrid x:Name="xamDataGrid" Width="Auto" HorizontalAlignment="Stretch" Margin="0,0,0,0" ClipToBounds="True" DataSource="{Binding ElementName=root, Path=ObjectCollection,UpdateSourceTrigger=PropertyChanged}" GroupByAreaLocation="None">
Now, My problem is, in collapsed state, Expander does not "Autofit" the content i.e. XAMdatagrid width, but when I expand by clicking on togglebutton, width is properly set to the width of XAMdatagrid. when collapsed, i can see ToggleButton & Header Text & expander width is equal width of ToggleButton & Header Text.
what could be wrong here?
Thanks Alex, You are simply great!
Hello,
You can access that Grid element using the Infragistics.Utilities.GetAncestorFromName/ GetDescendantFromName methods as you have specified a name already. Another way to do this, without the DataRecordCellAreaGridTemplate is by setting CellWidth and LabelWidth properties of the Fields in the FieldLayout.