Why won't this support horizontal scrolling?
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Territories}" HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel CanHorizontallyScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Auto" >
</VirtualizingStackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75" />
<ColumnDefinition Width="75" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="65" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="75" />
<ColumnDefinition Width="75" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Text="{Binding Quantity, StringFormat=N0, ValidatesOnDataErrors=True}" />
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding ProductionNumber, ValidatesOnDataErrors=True}" />
<ComboBox Grid.Row="0" Grid.Column="2" SelectedValuePath="PrimaryKey" SelectedValue="{Binding RepKey}" ItemsSource="{Binding RepCanidates}" TextSearch.TextPath="FullName" Margin="4">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding FullName}" ToolTip="{Binding FullName}" Width="150" />
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Bd"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<StackPanel Orientation="Horizontal">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<TextBlock Text="{Binding CompanyBranchName}" ToolTip="{Binding CompanyBranchName}" Width="200"/>
<TextBlock Margin="4,0,0,0" Text="{Binding ShortAddress}" ToolTip="{Binding ShortAddress}" />
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
<Button Grid.Row="1" Grid.Column="2" Content="Advanced Search" Name="cmdAdvancedSearch" Click="cmdAdvancedSearch_Click" />
<ComboBox Grid.Row="0" Grid.Column="3" SelectedValuePath="PrimaryKey" SelectedValue="{Binding CompanyBranchKey}" ItemsSource="{Binding CompanyBranchCanidates}" Margin="4" IsEnabled="{Binding CompanyBranchKeyEditable}">
</ComboBox>
<TextBox Grid.Row="0" Grid.Column="4" Text="{Binding ZipCode}" IsEnabled="{Binding ZipCodeEditable}"/>
<ComboBox Grid.Row="0" Grid.Column="5" SelectedValuePath="PrimaryKey" SelectedValue="{Binding StateKey}" ItemsSource="{Binding StateCanidates}" Margin="4" IsEnabled="{Binding StateKeyEditable}">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding State}" ToolTip="{Binding StateName}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<ComboBox Grid.Row="0" Grid.Column="6" SelectedValuePath="PrimaryKey" SelectedValue="{Binding TerritoryKey, ValidatesOnDataErrors=True}" ItemsSource="{Binding TerritoryCanidates}" Margin="4" IsEnabled="{Binding TerritoryKeyEditable}">
</ComboBox>
<Button Grid.Row="0" Grid.Column="7" Content="Delete" Click="cmdDeleteRow_Click" Margin="4" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
This change will work:
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Visible">
Related
I have a comobox defined as follows:
<ComboBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" SelectedValue="{Binding Path=CurrentLineItem.Location, Mode=TwoWay}" SelectedValuePath="Location" DisplayMemberPath="Location" IsEnabled="{Binding Path=CurrentLineItem.Editing, Mode=OneWay}" ItemsSource="{Binding CurrentLineItem.LocationDetails}">
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="5" Grid.Column="0" Text="{Binding Location, Mode=OneWay}"/>
<TextBlock Margin="5" Grid.Column="1" Text="{Binding OnHand, Mode=OneWay, StringFormat=\{0:N4\}}"/>
<TextBlock Margin="5" Grid.Column="2" Text="{Binding Allocated, Mode=OneWay, StringFormat=\{0:N4\}}"/>
<TextBlock Margin="5" Grid.Column="3" Text="0.0000"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
This is working fine except that I want the selected item to be highlighted with a blue background. How do I do this?
<ComboBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" SelectedValue="{Binding Path=CurrentLineItem.Location, Mode=TwoWay}" SelectedValuePath="Location" DisplayMemberPath="Location" IsEnabled="{Binding Path=CurrentLineItem.Editing, Mode=OneWay}" ItemsSource="{Binding CurrentLineItem.LocationDetails}">
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="5" Grid.Column="0" Text="{Binding Location, Mode=OneWay}"/>
<TextBlock Margin="5" Grid.Column="1" Text="{Binding OnHand, Mode=OneWay, StringFormat=\{0:N4\}}"/>
<TextBlock Margin="5" Grid.Column="2" Text="{Binding Allocated, Mode=OneWay, StringFormat=\{0:N4\}}"/>
<TextBlock Margin="5" Grid.Column="3" Text="0.0000"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IsSelected}" Value="True">
<Setter Property="Background" Value="Blue"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
I've a performance problem with an ItemsControl. I've virtualized the ItemsControl using the following style
<Style x:Key="VirtualizedItemsControl"
TargetType="{x:Type ItemsControl}">
<Setter Property="VirtualizingStackPanel.IsVirtualizing"
Value="True" />
<Setter Property="ScrollViewer.CanContentScroll"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderThickness="{TemplateBinding Border.BorderThickness}"
Padding="{TemplateBinding Control.Padding}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="True">
<ScrollViewer Padding="{TemplateBinding Control.Padding}"
Focusable="False">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
My ItemsTemplate is an Expander with another ItemsControl which ItemsTemplate is an Expander with a DataGrid (DataContext is a list in a list).
When my bound data is getting more (like 100 entries in the first list and in each datagrid ~100 entries) the ui is getting really slow if i start to scroll.
I don't know why it's getting so slow.
I change the background color of each DataGrid cell if there are changes. That's why I use DataGridTemplateColumns.
<ItemsControl ItemsSource="{Binding MyList}"
x:Name="_container"
Style="{StaticResource VirtualizedItemsControl}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander>
<Expander.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock />
<Button Grid.Column="1"
Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.DeleteCommand}"
CommandParameter="{Binding}">
<Image Source="trashcan-delete.png"
HorizontalAlignment="Right" />
</Button>
</Grid>
</Expander.Header>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Some text" />
<ComboBox Grid.Column="1"
Margin="5 0"
Width="150"
HorizontalAlignment="Left"
Text="{Binding Name.Property}"
SelectedItem="{Binding SelectedName, UpdateSourceTrigger=PropertyChanged}"
Foreground="Black"
IsEditable="True"
DisplayMemberPath="Name"
ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.Children}"
Background="{Binding Name.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}" />
</Grid>
<ItemsControl Grid.Row="1"
ItemsSource="{Binding ParameterBlocks}"
Style="{StaticResource VirtualizedItemsControl}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander>
<Expander.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Index, Converter={StaticResource NumberToBlockHeaderConverter}}"
FontWeight="Bold"
Foreground="White" />
<Button Grid.Column="1"
Command="{Binding RelativeSource={RelativeSource AncestorType=Expander, AncestorLevel=2}, Path=DataContext.DeleteBlockCommand}"
CommandParameter="{Binding}">
<Image Source="trashcan-delete.png"
HorizontalAlignment="Right" />
</Button>
</Grid>
</Expander.Header>
<Grid Background="#E5E5E5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0"
Content="Some text"
VerticalAlignment="Center"
IsChecked="{Binding IsWaitingEnabled.Property}"
Background="{Binding IsWaitingEnabled.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}">
<Label Grid.Column="1"
Margin="15 0 0 0"
VerticalAlignment="Center"
Content="Some text"
IsEnabled="{Binding IsWaitingEnabled.Property}" />
<Xctk:IntegerUpDown Grid.Column="2"
Minimum="0"
Width="60"
Margin="5 0 0 0"
HorizontalAlignment="Left"
Text="Some text"
IsEnabled="{Binding IsWaitingEnabled.Property}"
</Grid>
<DataGrid ItemsSource="{Binding Channels}"
Style="{StaticResource StandardGridStyle}"
x:Name="BlockGrid"
Grid.Row="1"
CanUserSortColumns="True"
Margin="5 0"
MaxHeight="200"
SelectedItem="{Binding SelectedEntry}"
CanUserAddRows="True">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Some text"
Width="200">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Channel.Property, UpdateSourceTrigger=PropertyChanged}"
Foreground="Black"
Background="{Binding Channel.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox Text="{Binding Channel.Property, UpdateSourceTrigger=PropertyChanged}"
Foreground="Black"
IsEditable="True"
ItemsSource="{Binding RelativeSource={RelativeSource AncestorType={x:Type Expander}, AncestorLevel=2}, Path=DataContext.SelectedChannelList.Channels}"
IsEnabled="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=DataContext.IsPasswordProtected, Converter={StaticResource BoolToOppositeBoolConverter}}"
Background="{Binding Channel.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Some text"
Width="150"
Foreground="Black"
Binding="{Binding Value.Property, UpdateSourceTrigger=PropertyChanged}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding Value.IsDirty}"
Value="true">
<Setter Property="Background"
Value="#FFDDA203" />
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<DataGridTemplateColumn Header="Some text">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Block.Property}"
Foreground="Black"
Background="{Binding Block.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<Xctk:IntegerUpDown Minimum="1"
Maximum="{Binding RelativeSource={RelativeSource AncestorType={x:Type Expander}, AncestorLevel=2}, Path=DataContext.ParameterBlocks, Converter={StaticResource ListToCountConverter}}"
Text="{Binding Block.Property, UpdateSourceTrigger=PropertyChanged}"
Background="{Binding Block.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}">
<I:Interaction.Triggers>
<I:EventTrigger EventName="ValueChanged">
<Commands:EventToCommand Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type Expander}, AncestorLevel=2}, Path=DataContext.BlockChangedCommand}"
CommandParameter="{Binding }" />
</I:EventTrigger>
</I:Interaction.Triggers>
</Xctk:IntegerUpDown>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
<I:Interaction.Behaviors>
<Commands:DataGridScrollToSelectedItemBehavior />
</I:Interaction.Behaviors>
</DataGrid>
<StackPanel Grid.Row="2"
Margin="5"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Command="{Binding DeleteEntryCommand}"
Content="Some text"
CommandParameter="{Binding ElementName=BlockGrid, Path=SelectedItems}"
Width="120"
Margin="5 0" />
<Button Content="Some text"
Command="{Binding AddEntryCommand}"
Width="120"
Margin="5 0"
HorizontalAlignment="Right" />
</StackPanel>
</Grid>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Done; see my last comment.
The Expander style was making some trouble.
I m trying to create the expander with the header on right side and than add a grid to that exapnder. when i run this grids textblock doesnt apper. And like to know what are best way to create expander header on right side.
<StackPanel >
<Expander Header="Customer Detail" IsExpanded="False" Style="{StaticResource MainViewExpander}" >
<Expander.Content>
<StackPanel HorizontalAlignment="Stretch">
<Grid x:Name="ImageInformation" Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.8*"/>
<ColumnDefinition Width="1.4*"/>
<ColumnDefinition Width="2.8*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.9*" />
<RowDefinition Height="0.7*" />
<RowDefinition Height="0.7*" />
</Grid.RowDefinitions>
<Image Source="{Binding XPath=x.null}" Grid.Column="0" Grid.RowSpan="3"/>
<TextBlock Name="Customername"
Grid.Column="1"
Grid.ColumnSpan="2"
Text="Customer Name"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
TextWrapping="NoWrap" Margin="0,0,0,13" Width="140" Height="22"/>
<TextBlock Name="Born"
Grid.Column="1"
Grid.Row="1"
Text="Born"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextWrapping="NoWrap" Margin="2" Width="60" />
<TextBlock Name="BornDetail"
Grid.Column="2"
Grid.Row="1"
Text="BornDetail"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextWrapping="NoWrap" Margin="2" Width="125" />
<TextBlock Name="Speak"
Grid.Column="1"
Grid.Row="2"
Text="Speak"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextWrapping="NoWrap" Margin="2" Width="60" />
<TextBlock Name="SpeakDetail"
Grid.Column="2"
Grid.Row="2"
Text="Speak"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextWrapping="NoWrap" Margin="2" Width="125" Height="16" MaxHeight="20" MaxWidth="135"/>
</Grid>
<Grid Height="150" Width="295">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" ></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="" Grid.Column="0" Grid.Row="0" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="0" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="1" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="1" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="2" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="2" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="3" TextWrapping="Wrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="3" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="4" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="4" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="5" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="5" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="6" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="6" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="7" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="7" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="8" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="8" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="9" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="9" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
</Grid>
</StackPanel>
</Expander.Content>
</Expander>
</StackPanel>
My stylesheet is something like this:
<UserControl.Resources >
<!-- Main Expander Header Brushes -->
<SolidColorBrush x:Key="MainExpanderHeaderBackgroundBrush" Color="#FF3771C1"/>
<SolidColorBrush x:Key="MainExpanderHeaderBorderBrush" Color="Black"/>
<!-- Main Expander Content Brushes -->
<SolidColorBrush x:Key="MainExpanderContentBorderBrush" Color="Black" />
<!-- Main Expander Control Brushes (affect the whole control, not just header or content -->
<SolidColorBrush x:Key="MainExpanderControlNormalForegroundBrush" Color="White" />
<SolidColorBrush x:Key="MainExpanderControlDisabledForegroundBrush" Color="DarkGray" />
<SolidColorBrush x:Key="MainExpanderControlDisabledBackgroundBrush" Color="LightGray" />
<SolidColorBrush x:Key="MainExpanderControlDisabledBorderBrush" Color="LightGray" />
<!-- Main Expander Toggle Button Brushes -->
<SolidColorBrush x:Key="ExpanderToggleButtonBackgroundBrush" Color="White" />
<SolidColorBrush x:Key="ExpanderToggleButtonMouseOverFillBrush" Color="Green" />
<SolidColorBrush x:Key="ExpanderToggleButtonPressedFillBrush" Color="Yellow" />
<!-- Expander Toggle Button Template -->
<ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton">
<!-- Note, the chevron toggle button gets its forground color from the templated parent.
The parent must set this to a valid color when it is disabled. -->
<Path
Name="Chevron"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 10 10 L 20 0 Z"
Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Foreground}"
/>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter TargetName="Chevron" Property="Data" Value="M 0 10 L 10 0 L 20 10 Z" />
</Trigger>
<Trigger Property="ToggleButton.IsMouseOver" Value="true">
<Setter TargetName="Chevron" Property="Fill" Value="{StaticResource ExpanderToggleButtonMouseOverFillBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Chevron" Property="Fill" Value="{StaticResource ExpanderToggleButtonPressedFillBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="MainViewExpander" TargetType="Expander">
<Setter Property="Foreground" Value="{StaticResource MainExpanderControlNormalForegroundBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Expander">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Name="ContentRow"/>
</Grid.RowDefinitions>
<Border
Name="HeaderBorder"
Grid.Row="0"
BorderThickness="1"
CornerRadius="0,0,0,0"
BorderBrush="{StaticResource MainExpanderHeaderBorderBrush}"
Background="{StaticResource MainExpanderHeaderBackgroundBrush}"
>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<ContentPresenter
Grid.Column="0"
Margin="4"
ContentSource="Header"
RecognizesAccessKey="True"
/>
<ToggleButton
Grid.Column="1"
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
Template="{StaticResource ExpanderToggleButton}"
Background="{StaticResource ExpanderToggleButtonBackgroundBrush}"
/>
</Grid>
</Border>
<Border
Name="ContentBorder"
Grid.Row="1"
BorderBrush="{StaticResource MainExpanderContentBorderBrush}"
BorderThickness="1,0,1,1"
CornerRadius="0,0,0,0"
>
<ContentPresenter Margin="4" />
</Border>
</Grid>
<!-- Triggers for the entire Expander Control -->
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content, Path=DesiredHeight}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource MainExpanderControlDisabledForegroundBrush}"/>
<Setter TargetName="HeaderBorder" Property="Background" Value="{StaticResource MainExpanderControlDisabledBackgroundBrush}" />
<Setter TargetName="HeaderBorder" Property="BorderBrush" Value="{StaticResource MainExpanderControlDisabledBorderBrush}" />
<Setter TargetName="ContentBorder" Property="BorderBrush" Value="{StaticResource MainExpanderControlDisabledBorderBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}"
Foreground="{StaticResource MainExpanderControlNormalForegroundBrush}"
FontSize="18"
FontWeight="Bold"
/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MainViewExpanderCommands"
BasedOn="{StaticResource MainViewExpander}"
TargetType="Expander"
>
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
</UserControl.Resources >
so how to get the data of grid in expander?
There are three problems
The MainExpanderControlNormalForegroundBrush was White, so nothing was visible in the expander content area. Change it to black as shown below.
<SolidColorBrush x:Key="MainExpanderControlNormalForegroundBrush" Color="Black" />
In one of the triggers you are binding to an element with nameContent which is not there. You should be binding to ContentBorder as shown below.
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=ContentBorder, Path=DesiredHeight}" />
</Trigger>
Set your ContentRow Height to 0 to bring the expander functionality.
<RowDefinition Name="ContentRow" Height="0"/>
I have VirtualizingStackPanel in ListBox ItemsPanel. If I set Margin="0,0,0,50" then margin is not showed but if I set left margin (or top or right) Margin="50,0,0,0" then margin works correct.
If I change VirtualizingStackPanel for StackPanel then bottom margin works well.
This Is my code:
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<ListBox x:Name="TasksListBox"
Margin="0"
ItemsSource="{Binding Tasks}"
HorizontalAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<!--<StackPanel Margin="0,0,0,14" />-->
<VirtualizingStackPanel Margin="0,0,0,100"
Height="Auto" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Button Background="White"
Width="455"
Height="105"
Tag="{Binding Id}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Click="Button_Click_1">
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<TextBlock Grid.ColumnSpan="4"
Text="{Binding Name}"
FontSize="24"
Foreground="#400000" />
<Image Grid.Row="1"
Visibility="{Binding Project, Converter={StaticResource StringToVisibilityConverter}}"
Source="/Images/ProjectIcon.png"
Width="20"
Height="18"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0,0,5,0" />
<TextBlock Grid.Row="1"
Grid.Column="1"
Visibility="{Binding Project, Converter={StaticResource StringToVisibilityConverter}}"
Text="{Binding Project, Converter={StaticResource ToUppercaseConverter}}"
FontSize="16"
Foreground="#666666"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0,-2,9,0"
LineStackingStrategy="BlockLineHeight" />
<Image Grid.Row="1"
Grid.Column="2"
Visibility="{Binding Context, Converter={StaticResource StringToVisibilityConverter}}"
Source="/Images/ContextIcon.png"
Width="20"
Height="18"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="-3,1,1,0" />
<TextBlock Grid.Row="1"
Grid.Column="3"
Visibility="{Binding Context, Converter={StaticResource StringToVisibilityConverter}}"
Text="{Binding Context, Converter={StaticResource ToUppercaseConverter}}"
FontSize="16"
Foreground="#666666"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0,-2,0,0"
LineStackingStrategy="BlockLineHeight" />
</Grid>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="GestureListener_Flick_1" />
</toolkit:GestureService.GestureListener>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu IsZoomEnabled="False"
BorderBrush="#9c0605"
Foreground="#400000">
<toolkit:MenuItem Header="dokončeno"
Foreground="#400000"
Tag="{Binding Id}"
Click="MenuItem_Click_1" />
<toolkit:MenuItem Header="upravit"
Foreground="#400000"
Tag="{Binding Id}"
Click="MenuItem_Click_2" />
<toolkit:MenuItem Header="odstranit"
Foreground="#400000"
Tag="{Binding Id}"
Click="MenuItem_Click_3" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Code Behind
ObservableCollection<string> data = new ObservableCollection<string>();
for (int i = 0; i < 40; i++)
{
data.Add("Item" + i);
}
lbTest.ItemsSource = data;
Xaml
<Grid x:Name="LayoutRoot"
Background="Transparent">
<ListBox x:Name="lbTest">
<ListBox.Style>
<Style TargetType="ListBox">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Foreground"
Value="{StaticResource PhoneForegroundBrush}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="Padding"
Value="0,0,0,150" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
Padding="{TemplateBinding Padding}">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Style>
</ListBox>
</Grid>
I'm using a listView based on itemTemplate.
So i need in my template to alternate the background color :
- fist row: white
- second row:gray
- third row: white
- forth: gray
this is my template:
<DataTemplate x:Key="ItemFlight" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="#28AADB" Margin="2">
<Image Source="{Binding Path=IsArrival, Converter={StaticResource BooleanToImageDisplayConverter}}" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
</Border>
<Grid Grid.Column="1" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="6*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding FlightName}" FontWeight="Bold" Grid.Column="0" Grid.Row="0" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding ArrivalOrDepartDateTime, Converter={StaticResource DateTimeConverter}}" FontWeight="Bold" Grid.Column="0" Grid.Row="1" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding Terminal, Converter={StaticResource StringUpperConverter}}" Grid.Column="1" Grid.Row="0" Margin="10" Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityReverseConverter}}" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding CityInfo.Name}" Grid.Column="1" Grid.Row="0" Margin="10" Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityConverter}}" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding DepartureTime}" Grid.Column="1" Grid.Row="1" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding CityInfo.Name}" Grid.Column="2" Grid.Row="0" Margin="10" Style="{StaticResource MyTextBlockStyle}" Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityReverseConverter}}"/>
<TextBlock Text="{Binding Terminal, Converter={StaticResource StringUpperConverter}}" Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityConverter}}" Grid.Column="2" Grid.Row="0" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding ArrivalTime}" Grid.Column="2" Grid.Row="1" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding Status}" Grid.Column="3" Grid.Row="0" Grid.RowSpan="2" Margin="15" Style="{StaticResource MyTextBlockStyle}" Foreground="#EA6A1E" FontSize="20" TextWrapping="Wrap" />
</Grid>
</Grid>
</DataTemplate>
How Can I do this please??
I tried this and it works for me.
<Window x:Class="TryResponses.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vm="clr-namespace:TryResponses"
xmlns:system="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<vm:MainWindowViewModel x:Key="MainWindowViewModel" />
</Window.Resources>
<Grid Background="LightGray" DataContext="{StaticResource MainWindowViewModel}">
<Grid.Resources>
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="LightBlue" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>
<DataTemplate DataType="system:String">
<!-- put your data template here -->
</DataTemplate>
</Grid.Resources>
<ListView ItemsSource="{Binding Items}" AlternationCount="2" />
</Grid>
I hope this will help.
Regards
Claude
You should use AlternationCount property and it works on ListBox,ListView or any other control that inherits from ItemsControl.
The property definition and two examples are included at
https://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.alternationcount%28v=vs.110%29.aspx)
To view more clearly the selected lines, you can try this : (don't take care about the colors and final render, i've not spent the necessary time to make it sexy)
<Grid DataContext="{StaticResource MainWindowViewModel}">
<Grid.Resources>
<local:FalseToCollapsedConverter x:Key="FalseToCollapsedConverter" />
</Grid.Resources>
<ListView ItemsSource="{Binding Items}" AlternationCount="2" HorizontalContentAlignment="Stretch">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid x:Name="line">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentControl Content="{Binding .}" Margin="4" />
<TextBlock Grid.Column="1" Text="V" Margin="4" Visibility="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem, Mode=FindAncestor}, Converter={StaticResource FalseToCollapsedConverter}}" />
<Border Grid.ColumnSpan="2" Background="#5500FF00"
BorderBrush="Blue" BorderThickness="2"
Visibility="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem, Mode=FindAncestor}, Converter={StaticResource FalseToCollapsedConverter}}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter TargetName="line" Property="Background" Value="#CCCCFF" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter TargetName="line" Property="Background" Value="#CCFFCC" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.Resources>
</ListView>
</Grid>