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>
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).
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)
{
}
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.
I want to make a dynamic filling list that fill the screen what ever the content is
so here what I did:
first: the design
<Border BorderBrush="Black" CornerRadius="25" Margin="0,10,0,0" BorderThickness="1" Background="Aqua">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Width="100" Name="RED" Height="100" Click="ButtonDec_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/RED.png" />
</Button.Background>
</Button>
</StackPanel>
<StackPanel Margin="10,0,0,0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Name="name" HorizontalAlignment="Center" VerticalAlignment="Center" Text="AAAAAAAAAAAAA" Foreground="{Binding color}" TextWrapping="Wrap" FontWeight="Bold" FontSize="22" />
<TextBlock Name="count" HorizontalAlignment="Center" VerticalAlignment="Center" Text="CCCCC" FontWeight="Bold" TextWrapping="Wrap" FontSize="30" />
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Grid.Column="0" Width="100" Name="GREEN" Height="100" Click="ButtonInc_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/Green.png" />
</Button.Background>
</Button>
</StackPanel>
</Grid>
</Border>
and the result was an item that fill the screen and doesn't matter in portrait or landscape
and to make it dynamic, simply I made a list of data template
<ListBox Grid.Row="1" Name="countersList" HorizontalAlignment="Center" VerticalAlignment="Center" SelectionChanged="countersList_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" CornerRadius="25" Margin="0,10,0,0" BorderThickness="1" Background="Aqua">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Width="100" Name="{Binding index}" Height="100" Click="ButtonDec_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/RED.png" />
</Button.Background>
</Button>
</StackPanel>
<StackPanel Margin="10,0,0,0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Name="name" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding name}" Foreground="{Binding color}" TextWrapping="Wrap" FontWeight="Bold" FontSize="22" />
<TextBlock Name="count" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding count}" FontWeight="Bold" TextWrapping="Wrap" FontSize="30" />
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Grid.Column="0" Width="100" Name="{Binding index}" Height="100" Click="ButtonInc_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/Green.png" />
</Button.Background>
</Button>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
the result was a list that wrap it's size with it's content
so, how can I fix it, I want a list that fill the screen and it doesn't matter was it in landscape or portrait
The problem you are running into is that the item in the listbox isn't stretched.
A listbox item's size is NOT determined by the ItemTemplate but by the ItemContainerStyle and the size of the ListBox.
First add to the ListBox:
<ListBox HorizontalAlignment="Stretch" ...>
to make sure the ListBox itself is stretched horizontally. If you set it at Center it will only become as wide as its content/children request for.
Then add this to the ListBox:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
This ItemContainerStyle will cause all Items to be stretched to the width of the parent (ListBox's Item Panel)
I'm learning WPF and the MVVM Pattern and I'm trying to build a calendar-like view.
So I currently have a Grid with 6 rows and 7 columns.
The first row should be the Header, thus specifying the Week days like 'Monday, Tuesday, etc...'
I have the following right now in my MonthView.xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="{Binding RowHeight}"/>
<RowDefinition Height="{Binding RowHeight}"/>
<RowDefinition Height="{Binding RowHeight}"/>
<RowDefinition Height="{Binding RowHeight}"/>
<RowDefinition Height="{Binding RowHeight}"/>
<RowDefinition Height="{Binding RowHeight}"/>
<RowDefinition Height="{Binding RowHeight}"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding CellWidth}"/>
<ColumnDefinition Width="{Binding CellWidth}"/>
<ColumnDefinition Width="{Binding CellWidth}"/>
<ColumnDefinition Width="{Binding CellWidth}"/>
<ColumnDefinition Width="{Binding CellWidth}"/>
<ColumnDefinition Width="{Binding CellWidth}"/>
<ColumnDefinition Width="{Binding CellWidth}"/>
</Grid.ColumnDefinitions>
<!-- Header Row-->
<ContentPresenter Grid.Row="0" Grid.Column="0">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding DaysOfWeek[0]}"/>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
<ContentPresenter ContentTemplate="{StaticResource CalendarHeaderCellTemplate}" Grid.Row="0" Grid.Column="1" DataContext="{Binding DaysOfWeek[1]}"/>
<ContentPresenter ContentTemplate="{StaticResource CalendarHeaderCellTemplate}" Grid.Row="0" Grid.Column="2" DataContext="{Binding DaysOfWeek[2]}"/>
<ContentPresenter ContentTemplate="{StaticResource CalendarHeaderCellTemplate}" Grid.Row="0" Grid.Column="3" DataContext="{Binding DaysOfWeek[3]}"/>
<ContentPresenter ContentTemplate="{StaticResource CalendarHeaderCellTemplate}" Grid.Row="0" Grid.Column="4" DataContext="{Binding DaysOfWeek[4]}"/>
<ContentPresenter ContentTemplate="{StaticResource CalendarHeaderCellTemplate}" Grid.Row="0" Grid.Column="5" DataContext="{Binding DaysOfWeek[5]}"/>
<ContentPresenter ContentTemplate="{StaticResource CalendarHeaderCellTemplate}" Grid.Row="0" Grid.Column="6" DataContext="{Binding DaysOfWeek[6]}"/>
<!-- 1st Row-->
<ContentPresenter ContentTemplate="{StaticResource CalendarCellTemplate}" Grid.Row="1" Grid.Column="0"/>
<ContentPresenter ContentTemplate="{StaticResource CalendarCellTemplate}" Grid.Row="1" Grid.Column="1"/>
<ContentPresenter ContentTemplate="{StaticResource CalendarCellTemplate}" Grid.Row="1" Grid.Column="2"/>
<ContentPresenter ContentTemplate="{StaticResource CalendarCellTemplate}" Grid.Row="1" Grid.Column="3"/>
<ContentPresenter ContentTemplate="{StaticResource CalendarCellTemplate}" Grid.Row="1" Grid.Column="4"/>
<ContentPresenter ContentTemplate="{StaticResource CalendarCellTemplate}" Grid.Row="1" Grid.Column="5"/>
<ContentPresenter ContentTemplate="{StaticResource CalendarCellTemplate}" Grid.Row="1" Grid.Column="6"/>
On so on: You see the pattern I guess.
Here's the CalendarHeaderCellTemplate
<DataTemplate x:Key="CalendarHeaderCellTemplate">
<StackPanel Margin="5" Background="Blue">
<TextBlock Text="{Binding}"></TextBlock>
</StackPanel>
</DataTemplate>
And here's the important parts of the ViewModel:
public ObservableCollection<string> DaysOfWeek { get; private set; }
public MonthViewModel()
{
this.DaysOfWeek = new ObservableCollection<string> {DayOfWeek.Monday.ToString(), DayOfWeek.Tuesday.ToString(), DayOfWeek.Wednesday.ToString(),
DayOfWeek.Thursday.ToString(), DayOfWeek.Friday.ToString(), DayOfWeek.Saturday.ToString(), DayOfWeek.Sunday.ToString()};
}
Now neither the Contentpresenter where I define the DataTemplate 'inline' does display anything inside its TextBlock nor the CalendarHeaderCellTemplate.
Funny thing is, inside the Visual Studio designer, everything show up correctly, except for the first cell (i.e. the one with the inline template)
Does anyone have a suggestion.
N.B. The 'inline' template was mostly done for testing purposes.
EDIT:
Doing this (see below) instead of using the ContentPresenter works fine. Maybe I use the ContentPresenter in a wrong manner?
<StackPanel Grid.Row="0" Grid.Column="0">
<TextBlock Text="{Binding DaysOfWeek[0]}"/>
</StackPanel>
The reason I want to use a ContentPresenter is because the DataTemplate for the content of every cell is going to be much more than just a textbox in the end.
Try changing your ContentPresenter to
<ContentPresenter Content="{Binding DaysOfWeek[0]}" Grid.Row="0" Grid.Column="0">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
or
<ContentPresenter Content="{Binding}" Grid.Row="0" Grid.Column="0">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding DaysOfWeek[0]}"/>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
and also replace your DataContext with Content like
<ContentPresenter ContentTemplate="{StaticResource CalendarHeaderCellTemplate}" Grid.Row="0" Grid.Column="1" Content="{Binding DaysOfWeek[1]}"/>
try using ContentControl rather than ContentPresenter
<Style x:Key="CalendarCell" TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<StackPanel Margin="5" Background="{TemplateBinding Background}">
<TextBlock Text="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Header Row-->
<ContentControl Style="{StaticResource CalendarCell}"
Content="{Binding DaysOfWeek[0]}"
Background="Blue"
Foreground="White" />
<ContentControl Style="{StaticResource CalendarCell}"
Content="{Binding DaysOfWeek[1]}"
Background="Blue"
Foreground="White"
Grid.Column="1" />
<ContentControl Style="{StaticResource CalendarCell}"
Content="{Binding DaysOfWeek[2]}"
Background="Blue"
Foreground="White"
Grid.Column="2" />
<ContentControl Style="{StaticResource CalendarCell}"
Content="{Binding DaysOfWeek[3]}"
Background="Blue"
Foreground="White"
Grid.Column="3" />
<ContentControl Style="{StaticResource CalendarCell}"
Content="{Binding DaysOfWeek[4]}"
Background="Blue"
Foreground="White"
Grid.Column="4" />
<ContentControl Style="{StaticResource CalendarCell}"
Content="{Binding DaysOfWeek[5]}"
Background="Blue"
Foreground="White"
Grid.Column="5" />
<ContentControl Style="{StaticResource CalendarCell}"
Content="{Binding DaysOfWeek[6]}"
Background="Blue"
Foreground="White"
Grid.Column="6" />
<!-- 1st Row-->
<ContentControl Style="{StaticResource CalendarCell}"
Content=""
Background="Wheat"
Foreground="Black"
Grid.Row="1" />
<ContentControl Style="{StaticResource CalendarCell}"
Content=""
Background="Wheat"
Foreground="Black"
Grid.Column="1"
Grid.Row="1" />
<ContentControl Style="{StaticResource CalendarCell}"
Content=""
Background="Wheat"
Foreground="Black"
Grid.Column="2"
Grid.Row="1" />
<ContentControl Style="{StaticResource CalendarCell}"
Content=""
Background="Wheat"
Foreground="Black"
Grid.Column="3"
Grid.Row="1" />
<ContentControl Style="{StaticResource CalendarCell}"
Content=""
Background="Wheat"
Foreground="Black"
Grid.Column="4"
Grid.Row="1" />
<ContentControl Style="{StaticResource CalendarCell}"
Content=""
Background="Wheat"
Foreground="Black"
Grid.Column="5"
Grid.Row="1" />
<ContentControl Style="{StaticResource CalendarCell}"
Content=""
Background="Wheat"
Foreground="Black"
Grid.Column="6"
Grid.Row="1" />