I want to bind a button command from a listbox item. But my code not work. Can you help me?
My item template definition:
<UserControl.Resources>
<DataTemplate x:Key="MemberList">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Source="{DynamicResource appbar_user}" Height="30" Width="30" VerticalAlignment="Center" HorizontalAlignment="Left"/
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding EMail}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Button Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" Width="25" Height="25" VerticalAlignment="Center" IsDefault="False" Content="X">
</Button>
</Grid>
</DataTemplate>
</UserControl.Resources>
And my listbox declaration:
<ListBox Margin="0,0,10,0" Grid.Column="0" Grid.Row="2" x:Name="_ownersList" ItemsSource="{Binding GroupOwners}" ItemTemplate="{DynamicResource MemberList}" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="Button.Click" Handler="Button_Click"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Thank you for your help.
It worked fine for me
XAML:
<Window.Resources>
<DataTemplate x:Key="MemberList">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Source="{DynamicResource appbar_user}" Height="30" Width="30" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding EMail}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Button Grid.Column="2" Command="{Binding DataContext.CloseButton,RelativeSource={RelativeSource AncestorType=Window, AncestorLevel=1}}" Grid.Row="0" Grid.RowSpan="2" Width="25" Height="25" VerticalAlignment="Center" IsDefault="False" Content="X">
</Button>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid Height="200" Width="200" VerticalAlignment="Center">
<ListBox Margin="0,0,10,0" Grid.Column="0" Grid.Row="2" x:Name="_ownersList" ItemsSource="{Binding GroupOwners}" ItemTemplate="{DynamicResource MemberList}" >
<!--<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="Button.Click" Handler="Button_Click"/>
</Style>
</ListBox.ItemContainerStyle>-->
</ListBox>
</Grid>
ViewModel
private ICommand closeButton;
public ICommand CloseButton
{
get
{
if (this.closeButton == null)
{
this.closeButton = new RelayCommand<object>(this.ExecuteCloseButton);
}
return this.closeButton;
}
}
private void ExecuteCloseButton(object err)
{
}
Related
I have a WPF application which is based on multiple grids. So far it works as expected. The application shows some kind of toolbar at the top and an Image control at the center/bottom. When I resize the window, the Image element resizes as well which is perfectly fine.
Now, when I set the ImageSource to the Image control and the image is large (e.g. vertically), this will cause the whole window to resize vertically as well.
How can I allow the user to resize the window (including resizing the image) but NOT allow a resize operation when an image is loaded into the Image control?
<Window x:Class="GrafAoiKyErrorViewer.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ignore="http://www.galasoft.ch/ignore"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:command="http://www.galasoft.ch/mvvmlight"
xmlns:grafAoiKyErrorViewer="clr-namespace:GrafAoiKyErrorViewer"
mc:Ignorable="d ignore"
ResizeMode="CanResizeWithGrip"
SizeToContent="WidthAndHeight"
Title="Graf AOI KY Error Viewer"
MinWidth="600"
DataContext="{Binding Main, Source={StaticResource Locator}}"
Icon="Images/AnalyzeTrace_16x.png" MinHeight="800"
>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<command:EventToCommand Command="{Binding WindowLoadedCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<Window.InputBindings>
<KeyBinding Command="{Binding Path=SelectNextCommand}" Gesture="F2" />
<KeyBinding Command="{Binding Path=SelectPreviousCommand}" Gesture="F1" />
</Window.InputBindings>
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Skins/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
<grafAoiKyErrorViewer:ErrorClassToStringConverter x:Key="ErrorClassToStringConverter" />
</ResourceDictionary>
</Window.Resources>
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Margin="3">Datenbank</Label>
<ComboBox Grid.Row="0" Grid.Column="1" Margin="3" MinWidth="400" ItemsSource="{Binding AoiDatabaseCollection}" DisplayMemberPath="DisplayString" SelectedValue="{Binding AoiDatabaseSelected}" />
<Label Grid.Row="1" Grid.Column="0" Margin="3">Projekt</Label>
<ComboBox Grid.Row="1" Grid.Column="1" Margin="3" MinWidth="400" ItemsSource="{Binding AoiProjectCollection}" DisplayMemberPath="Name" SelectedValue="{Binding AoiProjectSelected}" />
<Label Grid.Row="2" Grid.Column="0" Margin="3">Lot</Label>
<ComboBox Grid.Row="2" Grid.Column="1" Margin="3" MinWidth="400" ItemsSource="{Binding AoiLotCollection}" DisplayMemberPath="Name" SelectedValue="{Binding AoiLotSelected}" />
<Grid Margin="10" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<ListView Grid.Column="0" Grid.Row="0" Margin="3" ItemsSource="{Binding ErrorClassCollection}" Height="200" SelectionMode="Single" MinWidth="200">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsSelected}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Item, Converter={StaticResource ErrorClassToStringConverter}}" Header="Fehlerklasse" />
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="0">
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionErrorClassAllOnCommand}">Alle Ein</Button>
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionErrorClassAllOffCommand}">Alle Aus</Button>
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionErrorClassRealErrorsOnlyCommand}">Echte Fehler</Button>
</StackPanel>
<ListView Grid.Column="1" Grid.Row="0" Margin="3" ItemsSource="{Binding PositionCollection}" Height="200" SelectionMode="Single" MinWidth="200">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsSelected}" />
<!--<CheckBox IsChecked="{Binding IsSelected}" Command="{Binding DataContext.FailureSelectionChangedCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView}}}" />-->
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Item}" Header="Position" />
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1">
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionPositionAllOnCommand}">Alle Ein</Button>
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionPositionAllOffCommand}">Alle Aus</Button>
</StackPanel>
<ListView Grid.Column="2" Grid.Row="0" Margin="3" ItemsSource="{Binding ArticleCollection}" Height="200" SelectionMode="Single" MinWidth="200">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsSelected}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Item}" Header="Artikel" />
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="2">
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionArticleAllOnCommand}">Alle Ein</Button>
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionArticleAllOffCommand}">Alle Aus</Button>
</StackPanel>
<ListView Grid.Column="3" Grid.Row="0" Margin="3" ItemsSource="{Binding PartTypeCollection}" Height="200" SelectionMode="Single" MinWidth="200">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsSelected}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Item}" Header="Bauform" />
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="3">
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionPartTypeAllOnCommand}">Alle Ein</Button>
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionPartTypeAllOffCommand}">Alle Aus</Button>
</StackPanel>
</Grid>
<Button Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" Margin="3" Padding="3" HorizontalAlignment="Left" Command="{Binding FailureSelectionChangedCommand}">Aktualisieren</Button>
<Grid Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid MinWidth="200">
<!-- DUMMY GRID -->
</Grid>
<Image Grid.Row="0" Grid.Column="1" Source="{Binding CurrentFailureItem.KyAoiFailureImage.Image2DData}" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Image>
<!--<Viewbox HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
</Viewbox>-->
<!--<Border BorderThickness="1" BorderBrush="Black" >
</Border>-->
<Grid Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" MinWidth="100" Margin="3" Padding="3" VerticalAlignment="Center" Command="{Binding SelectPreviousCommand}">Previous</Button>
<TextBlock Grid.Column="1" Margin="3" Padding="3" HorizontalAlignment="Stretch" TextAlignment="Center">
<Run Text="{Binding SelectedFailureItemIndexDisplay, Mode=OneWay}"></Run>
<Run Text=" / "></Run>
<Run Text="{Binding TotalFailureItemIndex, Mode=OneWay}"></Run>
</TextBlock>
<Button Grid.Column="2" MinWidth="100" Margin="3" Padding="3" VerticalAlignment="Center" Command="{Binding SelectNextCommand}">Next</Button>
</Grid>
<StackPanel Grid.Row="0" Grid.Column="2" Orientation="Vertical" VerticalAlignment="Center" Margin="3" MinWidth="200">
<TextBlock Text="{Binding CurrentFailureItem.Position}" FontSize="10" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding CurrentFailureItem.Article}" FontSize="10" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding CurrentFailureItem.PartType}" FontSize="10" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding CurrentFailureItem.ErrorClass}" FontSize="10" FontWeight="Bold"></TextBlock>
</StackPanel>
</Grid>
</Grid>
What you are seeing is actually the intended behaviour of the control however to fix this issue locate this line in your code:
<Grid Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3" >
and replace it with this:
<Grid Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3" MaxHeight="100">
while setting the MaxHeight to a reasonable value
EDIT:
OK, understand in this case replace the image with a grid and use its background:
<Grid Grid.Row="0" Grid.Column="1">
<Grid.Background>
<ImageBrush ImageSource="{Binding CurrentFailureItem.KyAoiFailureImage.Image2DData}" Stretch="Uniform"></ImageBrush>
</Grid.Background>
</Grid>
Try nesting your Image control within a Viewbox:
<Viewbox>
<Image ImageSource="{Binding MyImage"/>
</Viewbox>
You may need to mess about with the Viewbox Stretch attribute (I always forget which one does what, but you can usually get one to do what you want with a bit of trial and error).
My code is pretty straightforward:
<ListView Grid.Row="0" ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Border Grid.Row="0" Margin="0 2 0 2" BorderBrush="Black" BorderThickness="1" x:Name="ListItem" >
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Title}" FontWeight="Bold" FontSize="18" />
<Image Grid.Row="0" Grid.Column="1" Source="../Images/x.png" HorizontalAlignment="Right"/>
<StackPanel Orientation="Vertical" Grid.Row="1" Grid.ColumnSpan="2" MaxWidth="{Binding ElementName=ListItem, Path=Width}">
<TextBlock TextWrapping="WrapWithOverflow" Text="{Binding Description}" />
</StackPanel>
<TextBlock Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding TimeStamp}" HorizontalAlignment="Right"/>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
But the listview width becomes bigger than window's width every times there's an item with long descriptions
Neither the HorizontalContentAlignment setter, nor TextWrapping or MaxWitdh work.
What am I doing wrong??
Disable horizontal scrolling:
<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...>
My code is as follows:
<Grid
ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="5"
Background="Purple"
HorizontalAlignment="left" />
<ListBox
Grid.Row="0"
Grid.Column="0"
ItemsSource="{Binding Tests}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
Grid.IsSharedSizeScope="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="10*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock
Text="{Binding Name}"
Grid.Column="0">
</TextBlock>
<Image
Grid.Column="1">
</Image>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock
Grid.Row="0"
Grid.Column="1"
Text="{Binding CommandPromptOutput}">
</TextBlock>
<Button
Grid.Row="1"
Grid.Column="2"
Content="Run" VerticalAlignment="Bottom" HorizontalContentAlignment="Center" HorizontalAlignment="Stretch" />
</Grid>
The grid splitter is showing up but it has no control over resizing anything.
I have also tried adding:
<GridSplitter
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="5"
Background="Purple"
HorizontalAlignment="left"
ResizeDirection="Columns"
ResizeBehavior="PreviousAndNext" />
I use a ListView.GroupStyle in conjunction with a HeaderTemplate to style ListView Headers.
<ListView.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource headerTemplate}" />
</ListView.GroupStyle>
...
<DataTemplate x:Key="headerTemplate">
<Border Opacity=".9" Padding="0,5,0,5" Margin="0" BorderThickness="0" BorderBrush="LightGray" HorizontalAlignment="Stretch" Background="#ffffff">
<Grid Margin="3" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
Text="{Binding Path=Name}"
HorizontalAlignment="Right"/>
<StackPanel Grid.Column="1" Orientation="Horizontal">
<Button Margin="5" Padding="5"
HorizontalAlignment="left"
Content="{Binding ???}"
Command="{Binding ???}" />
</StackPanel>
</Grid>
</Border>
</DataTemplate>
Now I would like to put controls in that headerTemplate - e.g. a Button to execute actions to all entries within that group. How do I do this? How is Binding done within a GroupStyle HeaderTemplate?
You can use a RelativeSource Binding to access the DataContext of the GridView from the HeaderTemplate:
<DataTemplate x:Key="headerTemplate">
<Border Opacity=".9" Padding="0,5,0,5" ...>
<Grid Margin="3" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
Text="{Binding Name}"
HorizontalAlignment="Right"/>
<StackPanel Grid.Column="1" Orientation="Horizontal">
<Button Margin="5" Padding="5"
HorizontalAlignment="left"
Content="{Binding DataContext.SomeProperty, RelativeSource={
RelativeSource AncestorType={x:Type GridView}}}"
Command="{Binding DataContext.AnotherProperty, RelativeSource={
RelativeSource AncestorType={x:Type GridView}}}" />
</StackPanel>
</Grid>
</Border>
</DataTemplate>
I have a control - ItemsControl that was binding to ObservableCollection of a simple model,
I want that it's itemscontrol will have a capability to insert dircetion from bottom to top, How to i can implement that?
Currently, Every insertion to itemscontrol starts from the top to bottom, but i want to change that..
<Window >
<Window.Resources>
<DataTemplate x:Key="ModelTemplate" DataType="Model:Model">
<Grid
Tag="{Binding Path=Id}"
Background="Transparent">
<Border
Name="border"
Background="#2a3345"
BorderThickness="0"
CornerRadius="10"
Margin="10">
<Border.Effect>
<DropShadowEffect
ShadowDepth="0"
Opacity="0.8"
BlurRadius="10"/>
</Border.Effect>
<Grid
Height="100"
Width="280"
Margin="6">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="1"
Text="{Binding Path=Title}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
FontSize="14"
FontWeight="Bold"
VerticalAlignment="Center"
Margin="2,4,4,2"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
Text="{Binding Path=Message}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
VerticalAlignment="Center"
Margin="2,2,4,4"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis"/>
</Grid>
</Border>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<ItemsControl
FocusVisualStyle="{x:Null}"
ItemsSource="{Binding SimpleCollection}"
ItemTemplate="{StaticResource ModelTemplate}" >
</ItemsControl>
</Grid>
The solution is override ItemsControl's ItemsPanel as follows:
<Window >
<Window.Resources>
<ScaleTransform ScaleY="-1" x:Key="Transform"/>
<DataTemplate x:Key="ModelTemplate" DataType="Model:Model">
<Grid
LayoutTransform="{StaticResource Transform}"
Tag="{Binding Path=Id}"
Background="Transparent">
<Border
Name="border"
Background="#2a3345"
BorderThickness="0"
CornerRadius="10"
Margin="10">
<Border.Effect>
<DropShadowEffect
ShadowDepth="0"
Opacity="0.8"
BlurRadius="10"/>
</Border.Effect>
<Grid
Height="100"
Width="280"
Margin="6">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="1"
Text="{Binding Path=Title}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
FontSize="14"
FontWeight="Bold"
VerticalAlignment="Center"
Margin="2,4,4,2"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
Text="{Binding Path=Message}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
VerticalAlignment="Center"
Margin="2,2,4,4"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis"/>
</Grid>
</Border>
</Grid>
</DataTemplate>
<ItemsPanelTemplate x:Key="ItemsPanelTemplateVerticalAlignment">
<StackPanel VerticalAlignment="Bottom" LayoutTransform="{StaticResource Transform}"/>
</ItemsPanelTemplate>
</Window.Resources>
<Grid>
<ItemsControl
FocusVisualStyle="{x:Null}"
ItemsSource="{Binding SimpleCollection}"
ItemTemplate="{StaticResource ModelTemplate}"
ItemsPanel="{StaticResource ItemsPanelTemplateVerticalAlignment}"/>
</Grid>
</Window>
The order of items in ItemsControl is the same as in ObservableCollection. Thus, if you do Collection.Insert(0, item), new item in ItemsControl will appear on the top.