BindableCollection in ContentPresenter - c#

I'm using a ContentPresenter (like a partial view in MVC) to display a simple list of (sub)view in the UserControl, but the data is not bound.
Tried the verbose version of data binding, also the one liner, but no data bound to the display.
The UserControl has a property, called WorkPieces which is a BindableCollection of WorkPieceViewModel, and instantiated on startup to have a default value of Width: 0, Length: 0 and a Designator (roman number).
The relevant part of the UserControl view:
<ContentPresenter Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2" x:Name="WorkPieces" HorizontalAlignment="Stretch">
<ContentPresenter.ContentTemplate>
<DataTemplate DataType="{x:Type models:WorkPieceViewModel}">
<local:WorkPieceView />
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
The WorkPieceView: (also a UserControl)
<DockPanel HorizontalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" x:Name="WorkPieceId" Visibility="Hidden" />
<TextBlock Grid.Row="0" Grid.Column="1" x:Name="Designator" Text="{Binding Designator}" MinWidth="15"/>
<TextBlock Grid.Row="0" Grid.Column="2" Text="{x:Static lang:Resources.Txt_W}" />
<TextBox Grid.Row="0" Grid.Column="3" x:Name="WorkWidth" MinWidth="50"/>
<TextBlock Grid.Row="0" Grid.Column="4" Text=" x " />
<TextBlock Grid.Row="0" Grid.Column="5" Text="{x:Static lang:Resources.Txt_L}" />
<TextBox Grid.Row="0" Grid.Column="6" x:Name="WorkLength" MinWidth="50"/>
<Button Grid.Row="0" Grid.Column="7" Margin="5">
<Image Source ="/Images/plus-sign.png" Height="16" Width="16" />
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<cal:ActionMessage MethodName="AddNewWorkPiece" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button Grid.Row="0" Grid.Column="8" Margin="5">
<Image Source ="/Images/minus-sign.png" Height="16" Width="16" />
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<cal:ActionMessage MethodName="RemoveWorkPiece">
<cal:Parameter Value="{Binding ElementName=Id}" />
</cal:ActionMessage>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
</DockPanel>
The main issue is the width and length values not bound.
I've got a few other issues, like the strech is not working - but that is just UI, the Designator is not displayed, although it has a value of 'I' (roman 1). This can be because of no binding happens.


The problem was the overcomplication of the task. A simple ListBox with a BindingList solved my problem...

Related

Stretch TextBlock to all available width

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>

Binding DropShadowTextBlock into a DataTemplate

I'm trying to bind a DropShadowTextBlock (Like a TextBlock) But it is not possible because it is inside a DataTemplate, so it stays outside the form's tree.
I tried some ways I found here in the forum but no situation fit with mine.
Here's my XAML:
<Blacklight_Controls:DragDockPanel Background="White" x:Name="panel4" Header="Exams" d:LayoutOverrides="Width, Height" Maximized="Panel4Maximized" Restored="Panel4Restored" Minimized="Panel4Minimized" Margin="7">
<Blacklight_Controls:DragDockPanel.HeaderTemplate >
<DataTemplate >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Blacklight_Controls:DropShadowTextBlock
Text="{Binding TituloModelo}"
FontFamily="Verdana"
FontSize="11"
VerticalAlignment="Center"
Margin="1"
TabIndex="1000"
DropShadowDistance="0"
DropShadowAngle="45"
Foreground="Black">
</Blacklight_Controls:DropShadowTextBlock>
<Image Grid.Column="2"
code/>
<Image Grid.Column="3"
code"/>
<Image Grid.Column="4"
code"/>
</Grid>
</DataTemplate>
</Blacklight_Controls:DragDockPanel.HeaderTemplate>
<Grid>
<Grid x:Name="name0" />
<localControls:LastExam x:Name="nameLastExam"/>
<Grid x:Name="name1" Visibility="Collapsed" />
<Grid x:Name="name2" Visibility="Collapsed" />
<Grid x:Name="name3" Visibility="Collapsed" />
</Grid>
</Blacklight_Controls:DragDockPanel>
How can I do it?

WPF trigger event by clicking on specified content of SelectedItem in ListBox

I have template for ListBoxItems that contains 3 columns. Each item is represented by picture-text-picture. Is there some posibillity how to trigger event (for example PreviewMouseLeftButtonDown) only by clicking on third column in ListBoxItem (not enywhere else on item).
I know how to trigger it by clicking on whole ListBoxItem, but i need it to trigger only when clicked on the last column (picture). Thanks.
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,4,0,4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Image Source="images/showFile.png" Grid.Column="0" Height="16" Width="16"/>
<TextBlock Text="{Binding Name}" Grid.Column="1"/>
<Image Source="images/delete.png" Grid.Column="2" Height="16" Width="16"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
I tried proposed solution and it works. Thanks.

You can set the event listener only for the component you want:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,4,0,4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Image Source="images/showFile.png" Grid.Column="0" Height="16" Width="16"/>
<TextBlock Text="{Binding Name}" Grid.Column="1"/>
<Image Source="images/delete.png" Grid.Column="2" Height="16" Width="16" PreviewMouseLeftButtonDown="OnPreviewMouseLeftButtonDown"/>
</Grid>
</DataTemplate>

LongListMultiSelector Data Template stretches outside screen width - windows phone 8

I've the following pivot control in my application
<phone:PivotItem Header="{Binding Path=LocalizedResources.requests_title, Source={StaticResource LocalizedStrings}}" >
<Grid Margin="0,-12,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" >
<TextBlock FontWeight="Bold"
TextDecorations="Underline"
VerticalAlignment="Top"
TextWrapping="NoWrap"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Foreground="{StaticResource PhoneAccentBrush}"
toolkit:TurnstileFeatherEffect.FeatheringIndex="1"/>
<toolkit:PhoneTextBox AcceptsReturn="False"
TextWrapping="NoWrap"
Visibility="Collapsed"
TextChanged="SearchBox_TextChanged"
toolkit:TurnstileFeatherEffect.FeatheringIndex="1"/>
</StackPanel>
<toolkit:LongListMultiSelector Grid.Row="1"
ItemsSource="{Binding Details_OC}"
SelectionChanged="Requests_SelectionChanged"
toolkit:TurnstileFeatherEffect.FeatheringIndex="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,0,24,0">
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0.25" BorderBrush="{StaticResource PhoneAccentBrush}">
<Grid Background="{StaticResource TransparentBrush}" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal"
Grid.Row="0"
Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Top" >
<TextBlock Text="#" FontSize="{StaticResource PhoneFontSizeLarge}" />
<TextBlock x:Name="ID"
Text="{Binding ID}"
FontSize="{StaticResource PhoneFontSizeLarge}"
TextWrapping="NoWrap"/>
</StackPanel>
<TextBlock x:Name="date"
Text="{Binding Path=TIME, Converter={StaticResource dateConverter}}"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="{StaticResource PhoneFontSizeSmall}"
TextWrapping="NoWrap"/>
</Grid>
</Border>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
</Grid>
</phone:PivotItem>
The result appears as follows
You can see that the date Textblock is not appearing fully. I couldn't find the reason for this unexpected behavior. Please help.
Thank you.

The problem appears to be in the sizing of your columns. See the following, inside the <toolkit:LongListMultiSelector.ItemTemplate>:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
In this case I would give the first column a static width and then the second can fill the remaining space. Like this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Alternatively you may wish to take a look into the ItemInfoTemplate property of the LongListMultiSelector.
It gives you the ability to display a second column at the far right which does not get squashed over by the checkboxes when they become active.
An example can be found here.

Silverlight TabItem content not scrolling

I have this XAML where I have tried to get TabItem content to scroll (without success).
<ex:TabControl>
<ex:TabItem Header="General">
<ContentPresenter Content="{Binding }" ContentTemplate="{StaticResource tabMenuItem}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" />
</ex:TabItem>
<ex:TabItem Header="Prices (Item)">
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Auto">
<ContentPresenter Content="{Binding NonModifierPricesView}" ContentTemplate="{StaticResource tabMenuItemPrices}" />
</ScrollViewer>
</ex:TabItem>
</ex:TabControl>
When my TabControl gets resized so that the TabItem is too small to display all the content, no scrollbars are displayed. Have I done something wrong somewhere?
Edit : Requested XAML for tabMenuItemPrices
<DataTemplate x:Key="tabMenuItemPrices">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="1*" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Prices (in order of priority)" />
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ListBox HorizontalAlignment="Stretch" Margin="{StaticResource DefaultMargin}" x:Name="lstMenuItemPrices" SelectionMode="Single"
ItemsSource="{Binding }" ItemTemplate="{StaticResource MenuItemPriceDataTemplate}" Height="140" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<cmd:EventToCommand Command="{Binding DataContext.UpdateSelectedTaxGroupsCommand, ElementName=Editor}" CommandParameter="{Binding SelectedItem, ElementName=lstMenuItemPrices}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</ListBox>
<StackPanel VerticalAlignment="Center" Grid.Column="1" >
<Button Content="Move Up" HorizontalAlignment="Center" Margin="2" IsEnabled="{Binding SelectedIndex, Converter={StaticResource MinimumIntegerToBooleanConverter}, ConverterParameter=0, ElementName=lstMenuItemPrices, Mode=OneWay}" />
<Button Content="Move Down" HorizontalAlignment="Center" Margin="2" IsEnabled="{Binding SelectedIndex, Converter={StaticResource MinimumIntegerToBooleanConverter}, ConverterParameter=0, ElementName=lstMenuItemPrices, Mode=OneWay}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.ColumnSpan="2">
<Button HorizontalAlignment="Left" Margin="2" Content="New Price" Command="{Binding DataContext.AddPriceCommand, ElementName=Editor}" />
<Button Content="Remove Price" HorizontalAlignment="Left" Margin="2" Command="{Binding DataContext.RemovePriceCommand, ElementName=Editor}" CommandParameter="{Binding SelectedItem, ElementName=lstMenuItemPrices}"
IsEnabled="{Binding SelectedIndex, Converter={StaticResource MinimumIntegerToBooleanConverter}, ConverterParameter=0, ElementName=lstMenuItemPrices, Mode=OneWay}"/>
</StackPanel>
</Grid>
<TextBlock Text="Selected Price" Grid.Row="2" />
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<CheckBox Content="Amount Includes Tax" d:LayoutOverrides="Width, Height" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center"
IsChecked="{Binding SelectedItem.DTO.AmountIncludesTax, Mode=TwoWay, ElementName=lstMenuItemPrices}" Grid.ColumnSpan="3"/>
<TextBlock HorizontalAlignment="Right" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Text="Amount" Grid.Row="1"/>
<TextBlock Text="Cost" d:LayoutOverrides="Width, Height, GridBox" HorizontalAlignment="Right" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Grid.Row="2"/>
<TextBlock HorizontalAlignment="Right" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Text="Points" Grid.Row="3"/>
<TextBlock HorizontalAlignment="Right" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Text="Interface ID" Grid.Row="4"/>
<TextBox VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" Margin="{StaticResource DefaultMargin}"
Text="{Binding SelectedItem.DTO.Amount, Mode=TwoWay, ElementName=lstMenuItemPrices, Converter={StaticResource DecimalToMoneyStringConverter}}" />
<CheckBox Content="Open" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2"
IsChecked="{Binding SelectedItem.DTO.IsOpenAmount, Mode=TwoWay, ElementName=lstMenuItemPrices}"/>
<TextBox Text="{Binding SelectedItem.DTO.Cost, Converter={StaticResource DecimalToMoneyStringConverter}, Mode=TwoWay, ElementName=lstMenuItemPrices}" TextWrapping="Wrap"
Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" d:LayoutOverrides="GridBox" Grid.Column="1" Grid.Row="2"/>
<CheckBox Content="Inherit" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Grid.Column="2" Grid.Row="2"
IsChecked="{Binding SelectedItem.DTO.CostOverride, Converter={StaticResource CostToBooleanConverter}, Mode=TwoWay, ElementName=lstMenuItemPrices}" />
<TextBox Text="{Binding SelectedItem.DTO.PointsEarned, Converter={StaticResource IntegerToStringConverter}, Mode=TwoWay, ElementName=lstMenuItemPrices}" TextWrapping="Wrap"
Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Grid.Column="1" Grid.Row="3"
IsEnabled="{Binding SelectedItem.DTO.PointsEarnedInherited, Converter={StaticResource ReverseBooleanConverter}, ElementName=lstMenuItemPrices}"/>
<CheckBox Content="Inherit" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Grid.Column="2" Grid.Row="3"
IsChecked="{Binding SelectedItem.DTO.InheritPointsEarned, Mode=TwoWay, ElementName=lstMenuItemPrices}" />
<TextBox Margin="{StaticResource DefaultMargin}" Grid.Column="1" Grid.Row="4"
Text="{Binding SelectedItem.DTO.InterfaceID, Mode=TwoWay, ElementName=lstMenuItemPrices}" />
<CheckBox Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Content="Inherit tax from class" HorizontalAlignment="Left"
IsChecked="{Binding SelectedItem.DTO.InheritTaxes, Mode=TwoWay, ElementName=lstMenuItemPrices}" Grid.Row="5" Grid.ColumnSpan="3" />
<ListBox Margin="{StaticResource DefaultMargin}" Grid.Row="6" Grid.ColumnSpan="3" SelectionMode="Multiple" ItemsSource="{Binding DataContext.Repository.TaxGroups, ElementName=Editor}"
IsEnabled="{Binding SelectedItem.DTO.InheritTaxes, Converter={StaticResource BooleanToEnabledConverter}, ElementName=lstMenuItemPrices, ConverterParameter=false}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" >
<Setter Property="Margin" Value="2, 2, 2, 0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Background="Transparent">
<CheckBox IsChecked="{Binding Path=IsSelected, Mode=TwoWay}"
Content="{Binding DTO.Name}" Padding="5,0,10,0" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked">
<cmd:EventToCommand Command="{Binding SelectedItem.AddTaxGroupCommand, ElementName=lstMenuItemPrices}" CommandParameter="{Binding DTO.ID}" />
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<cmd:EventToCommand Command="{Binding SelectedItem.RemoveTaxGroupCommand, ElementName=lstMenuItemPrices}" CommandParameter="{Binding DTO.ID}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</CheckBox>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
</Grid>
</DataTemplate>

The ScrollViewer's child needs to manage it's own height and width. Your outer most grid in your ContentTemplate does not specify a HorizontalAlignment or VerticalAlignment so it's defaulting to a value of stretch... you can try setting the alignments to left and top as follows:
<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
The bottom line is, the outer most container inside your control template must set it's height and width to it's contents, not the parent container.

Categories