I have an issue putting an action button in my ItemRepeater. I proceeded the same way as I do in ListView :
<muxc:ItemsRepeater Margin="0,24,0,0" ItemsSource="{x:Bind ViewModel.Team.Events, Mode=OneWay}">
<muxc:ItemsRepeater.ItemTemplate>
<DataTemplate x:DataType="models:Event">
<controls:Expander
HorizontalContentAlignment="Left"
Header="{x:Bind Name, Mode=OneWay}"
ExpandDirection="Down"
>
<StackPanel HorizontalAlignment="Left" Padding="24">
<TextBlock Text="{x:Bind Name}" FontSize="36" />
<TextBlock Text="{x:Bind Description}" />
<StackPanel Spacing="4" Orientation="Horizontal">
<TextBlock Text="{x:Bind Start}" />
<TextBlock Text="-" />
<TextBlock Text="{x:Bind End}" />
</StackPanel>
<TextBlock Text="{x:Bind Type}" />
<Grid Width="1000" Margin="0,24,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="13*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="13*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock FontSize="24" Text="Participations" />
<ListView ItemsSource="{x:Bind Participations}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Participation">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Bind Username}" />
<FontIcon Grid.Column="1" Glyph="{x:Bind Confirmed, Converter={StaticResource BooleanIconConverter}}"></FontIcon>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
<StackPanel Grid.Column="2">
<TextBlock FontSize="24" Text="Discrepancies" />
<Grid Margin="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Player" />
<TextBlock Text="Type" Grid.Column="1"/>
<TextBlock Text="Reason" Grid.Column="2"/>
<TextBlock Text="Delay" Grid.Column="3"/>
</Grid>
<ListView ItemsSource="{x:Bind Discrepancies}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Discrepancy">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Bind Username}" />
<TextBlock Text="{x:Bind Type}" Grid.Column="1"/>
<TextBlock Text="{x:Bind Reason}" Grid.Column="2"/>
<TextBlock Text="{x:Bind DelayLength}" Grid.Column="3"/>
<Button Grid.Column="4" HorizontalAlignment="Right">
<Button.Flyout>
<Flyout>
<StackPanel>
<TextBlock Style="{ThemeResource BaseTextBlockStyle}" Text="Are you sure ?" Margin="0,0,0,12" />
<Button Click="DeleteDiscrepancy" Content="Yes" />
</StackPanel>
</Flyout>
</Button.Flyout>
<StackPanel Spacing="8" Orientation="Horizontal">
<FontIcon Glyph="" />
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Grid>
<StackPanel Spacing="16" Orientation="Horizontal" FlowDirection="RightToLeft">
<Button Click="HandleClickAddDiscrepancy">
<StackPanel Spacing="8" Orientation="Horizontal">
<TextBlock Text="Add Discrepancy"></TextBlock>
<FontIcon Glyph=""/>
</StackPanel>
</Button>
<Button>
<StackPanel Spacing="8" Orientation="Horizontal">
<TextBlock Text="Edit Event"></TextBlock>
<FontIcon Glyph=""/>
</StackPanel>
</Button>
<Button>
<StackPanel Spacing="8" Orientation="Horizontal">
<TextBlock Text="Delete Event"></TextBlock>
<FontIcon Glyph=""/>
</StackPanel>
</Button>
</StackPanel>
</StackPanel>
</controls:Expander>
</DataTemplate>
</muxc:ItemsRepeater.ItemTemplate>
</muxc:ItemsRepeater>
And in my code-behind :
private void HandleClickAddDiscrepancy(object sender, RoutedEventArgs e) {
var evt = (sender as Button)?.DataContext as Event;
if(ViewModel.AddDiscrepancyCommand.CanExecute(evt)) {
ViewModel.AddDiscrepancyCommand.Execute(evt);
}
}
But in this code-behind method, the DataContext of my button is null. Shouldn't it be the currend element of the list, in which section the button I clicked is ?
How should I proceed to implement such feature ?
Thanks in advance !
Related
I'm creating UWP application where one of the screens have layout like this:
<ListView>
<ListViewItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Ellipse
Width="32"
Height="32"
Margin="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="LightGray" />
<TextBlock
Grid.Column="1"
Margin="12,6,0,0"
FontSize="20"
Text="Here is Long Name" />
<StackPanel
Grid.Column="2"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Width="25" Height="45" BorderThickness="0">-</Button>
<TextBlock
Width="25"
Height="45"
Padding="0,5,0,0"
FontSize="24"
Text="0"
TextAlignment="Center" />
<Button Width="30" Height="45" BorderThickness="0">+</Button>
</StackPanel>
</Grid>
</ListViewItem>
<ListViewItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Ellipse
Width="32"
Height="32"
Margin="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="LightGray" />
<TextBlock
Grid.Column="1"
Margin="12,6,0,0"
FontSize="20"
Text="Short name" />
<StackPanel
Grid.Column="2"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Width="25" Height="45" BorderThickness="0">-</Button>
<TextBlock
Width="25"
Height="45"
Padding="0,5,0,0"
FontSize="24"
Text="0"
TextAlignment="Center" />
<Button Width="30" Height="45" BorderThickness="0">+</Button>
</StackPanel>
</Grid>
</ListViewItem>
</ListView>
It looks like this (I'm not allowed to insert image): https://i.stack.imgur.com/Afvn6.png
I want that StackPanel in last column to be on the right side, no matter how long is name. I assume this will be the case if TextBlock stretches to all available width, but it doesn't. How do I fix this?
Add this to you ListView
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
Could some identify why the following is not working please, I am trying to implement a Chat Message window where each Message will render a different style dependent on the MessageDirection. For this I am using a ItemsControl which is bound to the Messages property
In the ChatWindow class I have the following
public static readonly DependencyProperty MessagesProperty = DependencyProperty.Register(
"Messages",
typeof(ObservableCollection<Message>),
typeof(ChatWindow),
new PropertyMetadata(null));
public ObservableCollection<Message> Messages
{
get
{
return (ObservableCollection<Message>)this.GetValue(MessagesProperty);
}
set
{
this.SetValue(MessagesProperty, value);
}
}
I have the following defined in a ResourceDictionary
<ScrollViewer x:Name="srcMessages" Margin="0,0,0,0" VerticalScrollBarVisibility="Visible">
<StackPanel>
<ItemsControl ItemsSource="{Binding Path=Messages, RelativeSource={RelativeSource AncestorType={x:Type chat:ChatWindow}}}" x:Name="Messages">
<ItemsControl.ItemTemplate>
<DataTemplate>
<chat:MessageContentPresenter Content="{Binding}">
<chat:MessageContentPresenter.InboundTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="94" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" Orientation="Horizontal">
<TextBlock Text="Username One" FontSize="10" Foreground="#adadad"></TextBlock>
<TextBlock Text=" - " FontSize="10" Foreground="#adadad"></TextBlock>
<TextBlock Text="11:45 AM" FontSize="10" Foreground="#adadad"></TextBlock>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18" />
<ColumnDefinition Width="65" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="6" />
<ColumnDefinition Width="230" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="1" Height="60" Width="60" Source="pack://siteoforigin:,,,/Resources/noavatar.png" StretchDirection="Both" Stretch="Fill">
<Image.Clip>
<EllipseGeometry Center="30,30" RadiusX="30" RadiusY="30" />
</Image.Clip>
</Image>
<Polygon Grid.Column="3" Points="0,0 -4,3 0,6 0,0" StrokeThickness="2" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="#d8d7dc" Stroke="#d8d7dc"></Polygon>
<Border Grid.Column="4" BorderBrush="#d8d7dc" BorderThickness="1" Background="#d8d7dc" Padding="5">
<TextBlock TextWrapping="Wrap" Text="This is a message in a chat window..." VerticalAlignment="Top" FontSize="12" Foreground="#000000"></TextBlock>
</Border>
</Grid>
</Grid>
</DataTemplate>
</chat:MessageContentPresenter.InboundTemplate>
<chat:MessageContentPresenter.OutboundTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="94" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal">
<TextBlock Text="Username One" FontSize="10" Foreground="#adadad"></TextBlock>
<TextBlock Text=" - " FontSize="10" Foreground="#adadad"></TextBlock>
<TextBlock Text="11:45 AM" FontSize="10" Foreground="#adadad"></TextBlock>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="230" />
<ColumnDefinition Width="6" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="65" />
<ColumnDefinition Width="18" />
</Grid.ColumnDefinitions>
<Image Grid.Column="4" Height="60" Width="60" Source="pack://siteoforigin:,,,/Resources/noavatar.png" StretchDirection="Both" Stretch="Fill">
<Image.Clip>
<EllipseGeometry Center="30,30" RadiusX="30" RadiusY="30" />
</Image.Clip>
</Image>
<Polygon Grid.Column="2" Points="0,0 4,3 0,6 0,0" StrokeThickness="2" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="#4fcd00" Stroke="#4fcd00"></Polygon>
<Border Grid.Column="1" BorderBrush="#4fcd00" BorderThickness="1" Background="#4fcd00" Padding="5">
<TextBlock TextWrapping="Wrap" Text="This is a message in a chat window..." VerticalAlignment="Top" FontSize="12" Foreground="#000000"></TextBlock>
</Border>
</Grid>
</Grid>
</DataTemplate>
</chat:MessageContentPresenter.OutboundTemplate>
</chat:MessageContentPresenter>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
And the MessageContentPresenter is as below
public class MessageContentPresenter : ContentControl
{
#region Public Properties
public DataTemplate InboundTemplate { get; set; }
public DataTemplate OutboundTemplate { get; set; }
#endregion
#region Methods
protected override void OnContentChanged(object oldContent, object newContent)
{
base.OnContentChanged(oldContent, newContent);
var message = newContent as Message;
if (message.Direction == MessageDirection.Inbound)
{
this.ContentTemplate = this.InboundTemplate;
}
else
{
this.ContentTemplate = this.OutboundTemplate;
}
}
#endregion
}
When I run this code all works fine and the OnContentChanged method is executed once for each item in the Messages collection. The issue is that both the InboundTemplate and the OutboundTemplate are null.
I really cannot see what the problem is so and why the two templates are both null, any help greatly appreciated.
Indeed, you can use DataTemplateSelector.
But another option is to use the DataTemplate + ContentControl and Style:
First, drop your MessageContentPresenter class as we do not need it. Consequently, you need to remove your ItemsControl.ItemTemplate from your XAML.
Secondly, add DataTemplate + ContentControl and Style to your Window.Resources.
Try this to give you some lead:
<DataTemplate DataType="{x:Type local:Message}">
<ContentControl Content="{Binding Direction}">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding Direction}" Value="{x:Static local:MessageDirection.Inbound}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Button Background="Green">Inbound</Button>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Direction}" Value="{x:Static local:MessageDirection.Outbound}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Button Background="Red">Outbound</Button>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</DataTemplate>
I have the following markup (xaml):
<ListBox Name="lbEurInsuredType" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="30"></ColumnDefinition><ColumnDefinition Width="2"></ColumnDefinition>
<ColumnDefinition Width="30"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Title}"></TextBlock>
<TextBox Text="{Binding Uw}" Grid.Column="1"></TextBox>
<TextBox Text="{Binding Partner}" Grid.Column="3"></TextBox>
</Grid>
</DataTemplate></ListBox.ItemTemplate>
</ListBox>
This all looks ok, but now above column 1 and 3 I want to place a header. Can anyone show me how I add headers to my two columns.
Listview is surely the best option, but, if you need to use a listbox you could modify the template of the listbox in this way.
<ListBox Name="lbEurInsuredType" HorizontalContentAlignment="Stretch">
<ListBox.Template>
<ControlTemplate>
<DockPanel LastChildFill="True">
<Grid DockPanel.Dock="Top" Height="30">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition Width="2"></ColumnDefinition>
<ColumnDefinition Width="30"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Column 1</Label>
<Label Grid.Column="1">Column 2</Label>
<Label Grid.Column="2">Column 3</Label>
<Label Grid.Column="3">Column 4</Label>
</Grid>
<ItemsPresenter></ItemsPresenter>
</DockPanel>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition Width="2"></ColumnDefinition>
<ColumnDefinition Width="30"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Title}"></TextBlock>
<TextBox Text="{Binding Uw}" Grid.Column="1"></TextBox>
<TextBox Text="{Binding Partner}" Grid.Column="3"></TextBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I recommend that you use a ListView instead which more appropriate to you case, you could use a GridView inside and define the columns that you need then restyle them much more easily
<ListView Name="lbEurInsuredType" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Items}">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}"></TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
<GridViewColumn.Header>
<TextBlock Text="Column 1"></TextBlock>
</GridViewColumn.Header>
</GridViewColumn>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Uw}"></TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Partner}"></TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
<GridViewColumn.Header>
<TextBlock Text="Column 3"></TextBlock>
</GridViewColumn.Header>
</GridViewColumn>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
I haven't run this so there might be some issue with the code but this will give you the idea to add headers to the ListBox
<ListBox Name="lbEurInsuredType" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,2">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition Width="2"></ColumnDefinition>
<ColumnDefinition Width="30"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="Title" ></TextBlock>
<TextBlock Text="Uw" Grid.Column="1" ></TextBox>
<TextBlock Text="Partner" Grid.Column="3" ></TextBox>
<TextBlock Text="{Binding Title}" Grid.Row="1"></TextBlock>
<TextBox Text="{Binding Uw}" Grid.Column="1" Grid.Row="1"></TextBox>
<TextBox Text="{Binding Partner}" Grid.Column="3" Grid.Row="1"></TextBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Even Listbox can be inside a user control with dynamic data template
<Grid Style="{StaticResource TableHeader}">
<Grid.Resources>
<Style TargetType="{x:Type Border}" BasedOn="{StaticResource TableBorder}"/>
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource TextTableHeader}">
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="1">
<TextBlock Text="Card"/>
</Border>
<Border Grid.Column="1" BorderThickness="0 1 1 1">
<TextBlock Text="Type"/>
</Border>
<Border Grid.Column="2" BorderThickness="0 1 1 1">
<TextBlock Text="Limit"/>
</Border>
<Border Grid.Column="3" BorderThickness="0 1 1 1">
<TextBlock Text="Amount"/>
</Border>
<Border Grid.Column="4" BorderThickness="0 1 1 1">
<TextBlock Text="Payment Due"/>
</Border>
</Grid>
<ListBox Style="{StaticResource ListBoxStyle}"
ItemsSource="{Binding Source}"
SelectedItem="{Binding SelectedItem}"
IsHitTestVisible="{Binding IsSelectionActive}"
ItemTemplate="{Binding ItemTemplate}" />
</Grid>
ListBox has no HeaderTemplate. ListView is not the best option because it does not support Width="*" . If you get desperate and go to DataGrid you might be getting a lot more than you need. The solution is to use a HeaderedItemsControl
Just change the name of the Collection you are binding to and change the binding properties.
<!-- actual XAML -->
<HeaderedItemsControl
ItemTemplate="{DynamicResource CorrugationItemTemplate}"
ItemsSource="{Binding CorrugationItemCollection}"
Style="{DynamicResource CorrugationStyle}"/>
<!-- this goes in the resource dict -->
<DataTemplate x:Key="CorrugationItemTemplate">
<Grid Width="Auto" Background="#e1e1e1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Background="Lime" >
<Label Content="{Binding RangeLabel}" />
</Border>
<Border Grid.Column="1" Background="Orange" >
<Label Content="{Binding LeftPreGrind}" />
</Border>
<Border Grid.Column="2" Background="Lime" >
<Label Content="{Binding RightPreGrind}" />
</Border>
<Border Grid.Column="3" Background="Orange" >
<Label Content="{Binding LeftPostGrind}" />
</Border>
<Border Grid.Column="4" Background="Lime" >
<Label Content="{Binding RightPostGrind}" />
</Border>
</Grid>
</DataTemplate>
<Style TargetType="{x:Type HeaderedItemsControl}" x:Key="CorrugationStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedItemsControl}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20pt"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Background="Orange" >
<Label Content="Range" />
</Border>
<Border Grid.Column="1" Background="Lime" >
<Label Content="LeftPreGrind" />
</Border>
<Border Grid.Column="2" Background="Orange" >
<Label Content="RightPreGrind" />
</Border>
<Border Grid.Column="3" Background="Lime" >
<Label Content="LeftPostGrind" />
</Border>
<Border Grid.Column="4" Background="Orange" >
<Label Content="RightPostGrind" />
</Border>
<Grid Grid.Row="1" Grid.ColumnSpan="5" Width="Auto" Height="Auto" Background="White">
<ItemsPresenter/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a problem top aligning my stack panels/grids in my WPF window.
Any ideas on what I'm doing wrong? It seems to be occurring when I try to top align content within a listbox, that displays items using a horizontally aligned stackpanel.
If I set the Height of the Grid that holds the ListBox with ItemsSource = {Binding BoardMarkerRows} to say 1400, alignment then starts working correctly (but I wanted this grid to have an auto height).
Screenshot showing alignment off:
Here is my XAML
<Viewbox Grid.ColumnSpan="2" VerticalAlignment="Top">
<StackPanel VerticalAlignment="Top">
<StackPanel Name="StackPanelOptions">
<StackPanel Orientation="Horizontal ">
<Button Content="Init" HorizontalAlignment="Left" Margin="2" VerticalAlignment="Top" Width="75" Click="Init"/>
<Button Content="Rotate" HorizontalAlignment="Left" Margin="2" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
<Button Content ="Start" Command="{Binding BoardMarkerStartUpdatesCommand}" Margin="2"/>
<Button Content ="Hide" Name="ButtonHideHeader" Margin="2" Click="ButtonHideHeader_Click"/>
<TextBlock Margin="2">
<TextBlock.Text>
<MultiBinding StringFormat="Status: {0}">
<Binding Path="BoardMarker.Status" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock Margin="2">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0} Columns">
<Binding Path="BoardMarker.BoardMarkerColumns.Count " />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBox Height="24" TextWrapping="Wrap" Text="{Binding BoardMarker.MaximumResultDate}" Width="271"/>
<CheckBox Content="Use Maximum Result Date" IsChecked="{Binding BoardMarker.UseMaximumResultDate}"/>
<Label Content="Number Rows"/>
<TextBox Height="24" TextWrapping="Wrap" Margin="2" Text="{Binding BoardMarker.BoardMarkerSettings.NumberRowsPerColumn}" Width="50"/>
<Label Content="Days Offset"/>
<TextBox Height="24" TextWrapping="Wrap" Margin="2" Text="{Binding BoardMarker.DaysOffset}" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="Show All Runners"/>
<TextBox Height="24" TextWrapping="Wrap" Margin="2" Text="{Binding BoardMarker.ShowAll}" Width="300"/>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Vertical " VerticalAlignment="Top">
<StackPanel >
<Viewbox VerticalAlignment="Top" Stretch="Uniform">
<ListBox ItemsSource ="{Binding BoardMarker.BoardMarkerColumns}" Height="Auto" Width="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top">
<ListBox Height="Auto"
ItemsSource="{Binding .BoardMarkerRows}" Margin="5" Width="Auto" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid >
<Grid Height="Auto" Background="LightGreen" Width="180" Visibility="{Binding ConverterParameter=ArkleEvent
, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}" VerticalAlignment="Top" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Text="{Binding RowType}" />-->
<TextBlock Text="{Binding ArkleEvent.Name}" Margin="2" Width="Auto" Height="Auto" FontWeight="Bold" />
<TextBlock Grid.Column="1" HorizontalAlignment="Right" Text="{Binding ArkleEvent.Going}" Margin="2" Width="Auto" Height="Auto" />
</Grid>
<Grid Background="LightBlue" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Top" Width="180"
Visibility="{Binding ConverterParameter=ArkleMarket, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" HorizontalAlignment="Left" FontWeight="Bold">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0:HH:mm} {1}">
<Binding Path="ArkleMarket.ExpectedOffDate" />
<!--<Binding Path="RowType" />-->
<Binding Path="ArkleMarket.RaceLength" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock Grid.Column="1" HorizontalAlignment="Right">
<TextBlock.Text>
<MultiBinding StringFormat=" {0} Run {1} NR">
<Binding Path="ArkleMarket" Converter="{StaticResource ArkleMarketToNumberRunnersConverter}" ConverterParameter="StillRunning" />
<!--<Binding Path="RowType" />-->
<Binding Path="ArkleMarket" Converter="{StaticResource ArkleMarketToNumberRunnersConverter}" ConverterParameter="NR" />
<!--<Binding Path="ArkleMarket" Converter="{StaticResource ArkleMarketToNumberRunnersConverter}" ConverterParameter=",ConverterParameter=NR />-->
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</Grid>
<TextBlock Text="---------------------------------" Margin="0,-3,0,-3" Foreground="DodgerBlue"
Visibility="{Binding ConverterParameter=ArkleSelectionStaticFirst,
Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}"/>
<Grid
Visibility="{Binding ConverterParameter=ArkleSelectionStatic,
Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="88"/>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="38"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
<TextBlock Grid.Column="0" Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
<TextBlock Grid.Column="1" Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" />
<TextBlock Grid.Column="2" Text="{Binding ArkleSelection.PriceCurrent}" Margin="2" Width="Auto" HorizontalAlignment="Right" />
<TextBlock Grid.Column="3" Text="{Binding ArkleSelection.OpeningPrice}" Margin="2" Width="Auto" Foreground="DarkGray" HorizontalAlignment="Right" TextDecorations="Strikethrough" />
</Grid>
<Grid Visibility="{Binding ConverterParameter=ArkleSelectionRotating, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="88"/>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="38"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
<TextBlock Grid.Column="0" Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
<TextBlock Grid.Column="1" Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" />
<TextBlock Grid.Column="2" Text="{Binding ArkleSelection.PriceCurrent}" Margin="2" Width="Auto" HorizontalAlignment="Right" />
<TextBlock Grid.Column="3" Text="{Binding ArkleSelection.OpeningPrice}" Margin="2" Width="Auto" Foreground="DarkGray" HorizontalAlignment="Right" />
</Grid>
<StackPanel Visibility="{Binding ConverterParameter=TextRow,
Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<Label Content="{Binding Text}" />
</StackPanel>
<Grid Visibility="{Binding ConverterParameter=ArkleSelectionResult,
Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="88"/>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="38"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
<TextBlock Grid.Column="0" Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
<TextBlock Grid.Column="1" Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" />
<TextBlock Grid.Column="2" Text="{Binding ArkleSelection.PriceCurrent}" Margin="2" Width="Auto" HorizontalAlignment="Right" />
<TextBlock Grid.Column="3" Text="{Binding ArkleSelection.FinishingPosition,Converter={StaticResource ArkleSelectionFinishPositionToOrdinalDisplayText}}" Margin="2" Width="Auto" HorizontalAlignment="Right" />
</Grid>
<StackPanel Visibility="{Binding ConverterParameter=ArkleSelectionNonRunner, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<StackPanel Orientation="Horizontal">
<!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
<TextBlock Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
<TextBlock Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" Foreground="DarkGray" />
<TextBlock Text="NR" Margin="2" Width="30" Foreground="DarkGray" />
<TextBlock Text="{Binding ArkleSelection.OpeningPrice}" Margin="2" Width="30" Foreground="DarkGray" />
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Viewbox>
</StackPanel>
</StackPanel>
</StackPanel>
</Viewbox>
</Grid>
Add to the parent-listBox VerticalContentAlignment="Top"
Edit:
Little demo, with minimal changes from the source:
<Viewbox Grid.ColumnSpan="2" VerticalAlignment="Top">
<StackPanel VerticalAlignment="Top">
<StackPanel Orientation="Vertical " VerticalAlignment="Top">
<StackPanel Height="338" >
<Viewbox VerticalAlignment="Top" Stretch="Uniform">
<ListBox VerticalContentAlignment="Top" Height="Auto" Width="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top">
<ListBox Height="Auto" Margin="5" Width="Auto" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Width="40" Height="40">Some Child</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Items>
<TextBlock />
<TextBlock />
<TextBlock />
</ListBox.Items>
</ListBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Items>
<ListBoxItem>
<TextBlock />
<ListBoxItem.Style>
<Style TargetType="ListBoxItem" >
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate>
<Border Margin="5" Background="Red" Height="150" Width="40" >
<TextBlock >Demo tol item</TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBoxItem.Style>
</ListBoxItem>
<TextBlock />
<TextBlock />
<TextBlock />
</ListBox.Items>
</ListBox>
</Viewbox>
</StackPanel>
</StackPanel>
</StackPanel>
</Viewbox>
I dont have enough reputation to post this as a comment, so I'm posting as an answer.
I believe your problem may be in your ListBox.ItemTemplate:
...
<ListBox.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top">
<ListBox Height="Auto"
ItemsSource="{Binding .BoardMarkerRows}" Margin="5" Width="Auto" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid > // Missing vertical allignment in this grid
<Grid Height="Auto" Background="LightGreen" Width="180" Visibility="{Binding ConverterParameter=ArkleEvent
, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}" VerticalAlignment="Top" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Text="{Binding RowType}" />-->
<TextBlock Text="{Binding ArkleEvent.Name}" Margin="2" Width="Auto" Height="Auto" FontWeight="Bold" />
<TextBlock Grid.Column="1" HorizontalAlignment="Right" Text="{Binding ArkleEvent.Going}" Margin="2" Width="Auto" Height="Auto" />
</Grid>
...
I have following DataTemplate for usage within my phone.LongListSelector in my XAML view:
<DataTemplate x:Name="myLocationsListTemplate">
<StackPanel Margin="0,0,0,15">
<Grid VerticalAlignment="Top" Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" TextTrimming="WordEllipsis" Text="{Binding Name}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Top" Margin="0,0,0,22" />
<Image Grid.Column="0" Width="138" Height="25" Source="/mAppData/stars-3.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0"/>
<TextBlock Grid.Column="1" Text="{Binding DistanceInMeterFormatted, FallbackValue=fallback, TargetNullValue=nullvalue, Mode=OneWay}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" Margin="0,0,-3,20" VerticalAlignment="Bottom"/>
<TextBlock Grid.Column="1" Text="vor 10 min." TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</Grid>
<Grid VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="100" Height="100" Source="{Binding PreviewImg1}"/>
<Image Grid.Column="1" Width="100" Height="100" Source="{Binding PreviewImg2}"/>
<Image Grid.Column="2" Width="100" Height="100" Source="{Binding PreviewImg3}"/>
<Image Grid.Column="3" Width="100" Height="100" Source="{Binding PreviewImg4}"/>
</Grid>
</StackPanel>
</DataTemplate>
Now I want the complete DataTemplate Content made "clickable". Means: If user clicks on a TextBlock or one of the four Images or on whatever displayed in die List, an action should be performed with a databound property (saying the Name from the bound data should be given).
Any ideas how to get this working?
Why don't you just stick your entire template into a button? You can style the button if needs be to remove any default appearance you don't like. eg.
<Style x:Key="BlankButtonStyle" TargetType="ButtonBase">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent" />
</Style>