WP7 - VirtualizingStackPanel bottom margin does not work - silverlight

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>

Related

WPF double line on the top of listbox

I am new to wpf. I need to have a window that list all accounts added. But my application shows a double line below the "Accounts". Not sure what caused this. could someHow to fix this? Here is my xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel x:Name="StackPanel1" Grid.Row="0" HorizontalAlignment="Left" Height="150" VerticalAlignment="Top" Width="444">
<TextBlock x:Name="AddAccountTextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Height="60" Width="369" Text="Add account to allow for simple access to your company resources
" SnapsToDevicePixels="True"/>
<Button x:Name="AddAccount" Content="Add Account" HorizontalAlignment="Left" VerticalAlignment="Top" Width="140" RenderTransformOrigin="0.466,0.977" IsCancel="True" Height="40" Foreground="White" Background="Blue" Click="OnAddAccount"/>
</StackPanel>
<StackPanel x:Name="StackPanel2" Grid.Row="2" HorizontalAlignment="Left" Height="154" Width="444">
<TextBlock x:Name="AccountsTextBlock" TextWrapping="Wrap" Text="Accounts" Height="25" Width="68" FontSize="16" FontFamily="Tahoma"/>
<ListBox x:Name="accounts" Height="130" VerticalAlignment="Top">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Height" Value="100"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="_Border" BorderBrush="Gray" BorderThickness="0.5" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="_Border" Property="Background" Value="LightSkyBlue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" Width="100" Source="{Binding Path=imagePath}" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" Text="{Binding Path=userInfo}"></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
You may remove the borders of the ListBox by setting the BorderThickness property:
<ListBox x:Name="accounts" Height="130" VerticalAlignment="Top" Margin="100"
BorderThickness="0">
You may set it to 1,0,1,0 to remove only the top and bottom borders. The order is left, top, right, bottom.

show grid in expander.

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"/>

Alternate background color in Listview XAML

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>

ListBox content does not resize when window is made smaller

I'm using .NET 4.0 (not .NET 4.0 CP) and have run into this kinda unique issue. I created a ListBox to display bound elements, first off here is (a part) of my XAML.
<Grid Grid.Row="2" Background="#EEEEEE">
<Border Margin="6,10,10,10" BorderBrush="#666666" BorderThickness="1">
<ListBox ItemsSource="{Binding}" Name="appList" BorderThickness="0" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Margin="5" BorderThickness="3" CornerRadius="2" BorderBrush="Black" HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="ItemBorder">
<Image Width="64" Height="64" Source="{Binding Path=IconUri}" Stretch="UniformToFill" />
</Border>
<StackPanel Margin="0,5,5,5" Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock FontSize="18" Text="{Binding Path=DisplayName}" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<ProgressBar Grid.Column="0" Height="24" HorizontalAlignment="Stretch" IsIndeterminate="{Binding Path=IsDiscovering}" Value="{Binding Path=PercentageDownloaded}" />
<TextBlock Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"><TextBlock x:Name="percentageDownloaded" /><TextBlock x:Name="percentageMeter">%</TextBlock></TextBlock>
</Grid>
</StackPanel>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsDiscovering}">
<DataTrigger.Value>True</DataTrigger.Value>
<Setter TargetName="percentageDownloaded" Property="Text" Value="N/A" />
<Setter TargetName="percentageMeter" Property="Visibility" Value="Collapsed" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsDiscovering}">
<DataTrigger.Value>False</DataTrigger.Value>
<Setter TargetName="percentageDownloaded" Property="Text" Value="{Binding Path=PercentageDownloaded}" />
<Setter TargetName="percentageMeter" Property="Visibility" Value="Visible" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
</Border>
</Grid>
Sizing the window up stretches the ListBox content just fine, but when I size it down, it retains it's width and spawns vertical scrollbars.
Have you already tried to use a StackPanel as ItemsPanel?
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>

WPF ScrollViewer: Horizontal scrolling doesn't work

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">

Resources