Setting Datacontext on contentpresenter: Binding inside ContentTemplate is not working - wpf

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

Related

Bind button command in listboxItem

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)
{
}

Binding within a ListView GroupStyle Header

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>

How to change insert direction to ItemsControl

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.

Inheriting / BasedOn datatemplate

I have a DataTemplate that I am using within my WPF application -
<DataTemplate x:Key="mattersTemplate">
<Border Name="border" BorderBrush="Aqua" BorderThickness="1" Padding="5" Margin="5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="FileRef:"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=FileRef}" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="Description:"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="Priority:"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"/>
</Grid>
</Border>
</DataTemplate>
I then (in a DocumentSetTemplateSelector class) define which template to use;
What I would like to do / know is;
Create 4 other templates that would inherit this above template AND then allow certain attributes to be over-written;
An example (this template inherits from the above class) - so they look the same;
<DataTemplate x:Key="documentSet_Accounting">
<ContentPresenter Content="{Binding mattersTemplate}"
ContentTemplate="{StaticResource mattersTemplate}">
</ContentPresenter>
</DataTemplate>
I would like for there to be a style attached to this (if possible) so to get this effect;
<DataTemplate x:Key="documentSet_Accounting">
<ContentPresenter fontsize="20" Content="{Binding mattersTemplate}"
ContentTemplate="{StaticResource mattersTemplate}">
</ContentPresenter>
</DataTemplate>
or
<DataTemplate x:Key="documentSet_Accounting">
<ContentPresenter Style="AccountingStyle" Content="{Binding mattersTemplate}"
ContentTemplate="{StaticResource mattersTemplate}">
</ContentPresenter>
</DataTemplate>
How about using style inheritance within the templates rather than template inheritance?
<Style x:Key="mattersTemplateStyle">
<Setter Property="TextBlock.Foreground" Value="Green"/>
</Style>
<Style x:Key="documentSet_AccountingStyle" BasedOn="{StaticResource mattersTemplateStyle}">
<Setter Property="TextBlock.FontSize" Value="20"/>
</Style>
<DataTemplate x:Key="mattersTemplate">
<Border Name="border" BorderBrush="Aqua" BorderThickness="1" Padding="5" Margin="5">
<Grid Style="{StaticResource mattersTemplateStyle}">
[...]
</Grid>
</Border>
</DataTemplate>
<DataTemplate x:Key="documentSet_Accounting">
<Grid Style="{StaticResource documentSet_AccountingStyle}">
<ContentPresenter Content="{Binding mattersTemplate}" ContentTemplate="{StaticResource mattersTemplate}"></ContentPresenter>
</Grid>
</DataTemplate>

WP7 list width issue when orientation changs

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)

Resources