Data Template not injected in ItemContainer - wpf

I have an ItemsControl class that overrides the following methods:
protected override bool IsItemItsOwnContainerOverride(object item)
{
return item is TilePanelItem;
}
protected override DependencyObject GetContainerForItemOverride()
{
return new TilePanelItem();
}
I provided the template for TilePanelItem which is the container of ItemsControl:
<ControlTemplate x:Key="tileItemTemplate" TargetType="my:TilePanelItem">
<Grid Width="200" Height="100">
<Border BorderBrush="Black" BorderThickness="2">
<ContentPresenter RenderTransformOrigin=".5,.5" />
</Border>
</Grid>
</ControlTemplate>
And the Style for it:
<Style TargetType="my:TilePanelItem">
<Setter Property="Template" Value="{StaticResource tileItemTemplate}" />
</Style>
And finally the instance of my ItemsControl with the DataTemplate:
<my:TileItemsControl x:Name="tileControl" ItemsSource="{Binding}" >
<my:TileItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</my:TileItemsControl.ItemsPanel>
<my:TileItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="Blue">
<TextBlock Text="here I am" />
</Border>
</DataTemplate>
</my:TileItemsControl.ItemTemplate>
</my:TileItemsControl>
The DataTemplate that I defined is not injected in ItemContainer. When I run the app, it shows the borders as I declared in ItemContainter template but I don't see the DataTemplate.
What am I missing?
Thanks a million

You need to bring the ItemsTemplate in to become the ContentPresenter's ContentTemplate:
<ControlTemplate x:Key="tileItemTemplate" TargetType="my:TilePanelItem">
<Grid Width="200" Height="100">
<Border BorderBrush="Black" BorderThickness="2">
<ContentPresenter RenderTransformOrigin=".5,.5"
ContentTemplate="{Binding ItemsTemplate, RelativeSource={RelativeSource FindAncestor,my:TileItemsControl,1}}" />
</Border>
</Grid>
</ControlTemplate>

Related

Apply style to child content in WPF XAML with a template

I'm using a ListViewto display a menu. I want to apply a style to all ListViewItem. So far I have succeeded in one part of the concern but I would like to improve to avoid code replication. Here where I am :
<Window.Resources>
<Style x:Key="_listViewItemStyle" TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd"
...
</Border>
<ControlTemplate.Triggers>
...
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
And then use the style like that :
<ListView x:Name="_listViewMenu"
Background="Transparent"
BorderBrush="Transparent"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListViewItem Style="{StaticResource _listViewItemStyle}">
<StackPanel Orientation="Horizontal"
Width="230"
Margin="10,0,0,0">
<Image Width="30"
Source="Images/Settings.png"
Stretch="Uniform"/>
<TextBlock Text="Paramètres"
Margin="25,0,0,0"
Style="{StaticResource _fontStyle}"/>
</StackPanel>
</ListViewItem>
</ListView>
As you can see there are some stuff that I imagine I can avoid to duplicate if I have 50 ListViewItems, let's say :
<StackPanel Orientation="Horizontal"
Width="230"
Margin="10,0,0,0">
or
<Image Width="30"
...
Stretch="Uniform"/>
etc...
How to include in the style _listViewItemStyle all required properties to format StackPanel, Image, textbox, etc... of the ListViewItem?
Thanks.
You can define a class which has necessary properties and use it as item type of collection for ItemsSource which may be in view (xaml or code behind). Such class would be as follows.
public class SourceItem
{
public string? ImagePath { get; init; }
public string? Text { get; init; }
}
Then, if you just want to show items, ItemsControl would be suffice. I don't know how you intend to use Triggers though.
<ItemsControl Background="Blue" HorizontalAlignment="Left">
<local:SourceItem ImagePath="Images/Settings.png" Text="Paramètres"/>
...
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border x:Name="Bd">
<StackPanel Orientation="Horizontal"
Width="230"
Margin="10,0,0,0">
<Image Width="30"
Source="{Binding ImagePath, Mode=OneTime}"
Stretch="Uniform"/>
<TextBlock Text="{Binding Text, Mode=OneTime}"
Margin="25,0,0,0"
Style="{StaticResource _fontStyle}"/>
</StackPanel>
</Border>
<DataTemplate.Triggers>
...
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
In addition to the answer from #emoacht, you will need the following InputBindings:
<Border.InputBindings>
<MouseBinding Command="{Binding ItemCommand}" MouseAction="LeftClick"/>
</Border.InputBindings>

Silverlight Tooltip Style ContentPresenter TextWrapping

I want to create a Silverlight Tooltip Style but I don't want to use a textblock because the tooltip content might be an image or something else. So I'm using a ContentPresenter. My problem is how to set MaxWidth and force TextWrapping when content is text. This is what I have so far:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:System="clr-namespace:System;assembly=mscorlib"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
<Style TargetType="ToolTip">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border BorderBrush="DimGray" BorderThickness="1" CornerRadius="5" Background="WhiteSmoke" Opacity="0.8"
HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,10,0,-5" Width="Auto">
<Border.Effect>
<DropShadowEffect BlurRadius="16" ShadowDepth="8" Direction="-45" Color="Black" Opacity="0.6"/>
</Border.Effect>
<Grid>
<ContentPresenter Content="{TemplateBinding Content}" Margin="3"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
I found one way to do this:
Create 2 Tooltip styles - one for text and another for everything else, like this:
<Style x:Key="TooltipStyleForText" TargetType="ToolTip">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border BorderBrush="DimGray" BorderThickness="1" CornerRadius="5" Background="WhiteSmoke" Opacity="0.8"
HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,10,0,-5" Width="Auto">
<Border.Effect>
<DropShadowEffect BlurRadius="16" ShadowDepth="8" Direction="-45" Color="Black" Opacity="0.6"/>
</Border.Effect>
<Grid>
<TextBlock Text="{TemplateBinding Content}" MaxWidth="400" TextWrapping="Wrap" Margin="3"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TooltipStyleForOtherStuffThanText" TargetType="ToolTip">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border BorderBrush="DimGray" BorderThickness="1" CornerRadius="5" Background="WhiteSmoke" Opacity="0.8"
HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,10,0,-5" Width="Auto">
<Border.Effect>
<DropShadowEffect BlurRadius="16" ShadowDepth="8" Direction="-45" Color="Black" Opacity="0.6"/>
</Border.Effect>
<Grid>
<ContentPresenter Content="{TemplateBinding Content}" Margin="3"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and than when we use a TextBlock, call it's ToolTip style like this:
<TextBlock Text="something">
<ToolTipService.ToolTip>
<ToolTip Style="{StaticResource TooltipStyleForText}">
<TextBlock Text="Some text"/>
</ToolTip>
</ToolTipService.ToolTip>
</TextBlock>
This might not be the best solution because we have two styles so we need to specify write several lines for a simple TextBlock.
I hope someone has a better solution.
We needed to do the same thing and tried a few approaches before setting on the following solution. The problem is that when the ToolTip.Content is a string you need to show the tooltip using a TextBlock. When ToolTip.Content is not a string you need to use a ContentPresenter. So we ended up defining a ControlTemplate that has both, and we show/hide the appropriate one based on the type of ToolTip.Content. This approach is applied to all ToolTips in the application:
The following converter class helps out with this:
public class TooltipContentVisibilityConverter : IValueConverter
{
public Visibility VisibilityWhenToolTipContentIsAString { get; set; }
public Visibility VisibilityWhenToolTipContentIsNotAString { get; set; }
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var toolTip = value as ToolTip;
if (toolTip != null && toolTip.Content is string)
{
return VisibilityWhenToolTipContentIsAString;
}
return VisibilityWhenToolTipContentIsNotAString;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Then in your App.xaml you define the following.
<Converter:TooltipContentVisibilityConverter VisibilityWhenToolTipContentIsAString="Visible" VisibilityWhenToolTipContentIsNotAString="Collapsed" x:Key="tooltipStringContentVisibilityConverter" />
<Converter:TooltipContentVisibilityConverter VisibilityWhenToolTipContentIsAString="Collapsed" VisibilityWhenToolTipContentIsNotAString="Visible" x:Key="tooltipNonStringContentVisibilityConverter" />
<Style TargetType="ToolTip">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border CornerRadius="0" Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1" Padding="4">
<StackPanel Orientation="Vertical">
<TextBlock Text="{TemplateBinding Content}" TextWrapping="Wrap" MaxWidth="300"
Visibility="{Binding RelativeSource={RelativeSource AncestorType=ToolTip},Converter={StaticResource tooltipStringContentVisibilityConverter}}"/>
<ContentPresenter Content="{TemplateBinding Content}"
Visibility="{Binding RelativeSource={RelativeSource AncestorType=ToolTip},Converter={StaticResource tooltipNonStringContentVisibilityConverter}}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It seems like a bit of an awkward way to have to solve this problem, but it does work and we haven't found a better solution yet.

Giving a button in a textbox functionality, without using a custom control but overiding the textbox template

I implemented a button into the textbox overriding the template with the code below:
<Style x:Key="{x:Type TextBox}" TargetType="{x:Type TextBoxBase}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border Name="Border"
CornerRadius="2"
Padding="2"
Background="{StaticResource WindowBackgroundBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1">
<Grid x:Name="LayoutGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="PART_ContentHost" Grid.Column="0" />
<Button x:Name="XButton"
Grid.Column="2"
Width="25"
Height="25"
Content="X"
Visibility="Visible"
BorderBrush="Transparent"
Command="{Binding ButtonClick}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The button should delete all the content in the textbox when hit. For this I would like to use the command "Command="{Binding ButtonClick}""
Can the binding be done without creating a custom control and library ?
Or how can the binding or the functionality be done ?
I am using the MVVM pattern is there a way to for example use a ViewModel and create a property to bind that to ?
For bindings in the style like that I use AttachedCommandBehaviors "ACB"
http://marlongrech.wordpress.com/2008/12/13/attachedcommandbehavior-v2-aka-acb/
I use it for detecting clicks on items in a style that I want to detect clicks on. I haven't used it for buttons but I would think it should work just as well.
I am binding to the style's ancestor who's type is User Control this may need to be changed for your application.
You'll need to add the xmlns:acb namespace in your xaml as well see the link for details.
<ControlTemplate TargetType="{x:Type ListViewItem}">
<StackPanel x:Name="IconBorder"
acb:CommandBehavior.Event="PreviewMouseUp"
acb:CommandBehavior.Command="{Binding Path=DataContext.SelectedListItemSingleClickCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
acb:CommandBehavior.CommandParameter="{Binding}">
<DockPanel LastChildFill="False" HorizontalAlignment="Left" Width="{Binding Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}}">
<TextBlock Text="{Binding Title}"
DockPanel.Dock="Left"
x:Name="ListItemText" />
<Image x:Name="ActionIcon"
Source="{Binding Path=DataContext.SelectedListActionIcon, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
DockPanel.Dock="Right"
acb:CommandBehavior.Event="PreviewMouseUp"
acb:CommandBehavior.Command="{Binding Path=DataContext.SelectedListActionIconClickCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
acb:CommandBehavior.CommandParameter="{Binding}">
</Image>
</DockPanel>
<ContentPresenter DockPanel.Dock="Left" />
</StackPanel>
</ControlTemplate>

Binding in CustomControl

I have created a custom control which is (among other things) able to display many expanders in an ItemsControl.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"> <Style TargetType="{x:Type NxTabControl:NxCategoryControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type NxTabControl:NxCategoryControl}">
<ScrollViewer x:Name="contentScrollViewer" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<StackPanel HorizontalAlignment="Stretch" DockPanel.Dock="Bottom" VerticalAlignment="Stretch" Background="Transparent">
<ItemsControl ItemsSource="{TemplateBinding Content}">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Border>
<ItemsPresenter/>
</Border>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</ScrollViewer>
</DockPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> </ResourceDictionary>
The ItemsControl is binding to :
ItemsSource="{TemplateBinding Content}
Which is a DP in the class:
public class CategoryControl : ItemsControl
{
public ObservableCollection<Expander> Content
{
get { return (ObservableCollection<Expander>)GetValue(ContentProperty); }
set { SetValue(ContentProperty, value); }
}
public static readonly DependencyProperty ContentProperty = DependencyProperty.Register("Content", typeof(ObservableCollection<Expander>), typeof(CategoryControl), new FrameworkPropertyMetadata(new ContentCollection(), FrameworkPropertyMetadataOptions.AffectsRender | FrameworkPropertyMetadataOptions.AffectsParentMeasure)); }
I am using my custom control in a user Control by setting the content Property and adding expanders to it:
<NxTabControl:NxCategoryControl x:Name="catControl" DockMode="Top" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Green">
<TabControl:CategoryControl.Content>
<Expander Margin="0 3 0 3" IsExpanded="True" Header="Adresse" >
<ScrollViewer x:Name="ScrollViewerAdresse" HorizontalAlignment="Stretch" ockPanel.Dock="Left">
<Grid Width="{Binding ElementName=ScrollViewerAdresse, Path=ActualWidth, Converter={StaticResource HalfWidthConverter}}">
</Grid>
</ ScrollViewer>
</Expander>
<Expander>
</Expander>
<Expander Header={Binding ExpanderHeader}>
</Expander>
</TabControl:CategoryControl.Content>
My problem in this context is that I am not able to set this binding:
Grid Width="{Binding ElementName=ScrollViewerAdresse, Path=ActualWidth}"
And also no other binding that goes to an “ElementName”. I am e.g also binding to XamDataGrids.ActiveRecords by their name and other Elements. None of the bindings works.
Snoop tells me for the Width Property of the Grid:
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=ScrollViewerAdresse'.
BindingExpression:Path=ActualWidth; DataItem=null; target element is 'Grid'; target property is 'Width' (type 'Double')
Other bindings I am using in my expanders, binding to the ViewModel of the usercontrol work though, e.g.:
Header={Binding ExpanderHeader}
Any help would be welcome! Thx!

How to enable scrolling when listbox is disabled in Silverlight?

I want to disable listbox (not allow user to selected) but scrollable in Silverlight, how can I do that?
How about not using a ListBox. Despite it being the defacto means for displaying a list of items the true purpose of the ListBox is to select something from a list.
A scrollable list can be delivered by styleing the ItemsControl like this:-
<Grid.Resources>
<Style x:Key="ScrollableItemsControl" TargetType="ItemsControl">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ItemsControl">
<Border CornerRadius="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" TabNavigation="{TemplateBinding TabNavigation}">
<ItemsPresenter />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
Now you apply this style to an ItemsControl:-
<ItemsControl Style="{StaticResource ScrollableItemsControl}" ItemsSource="{Binding SomeData}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding SomeProperty}" Margin="5" />
<TextBlock Text="{Binding SomeOtherProperty}" Margin="5" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This is a scrollable list but with none of the selection semanitics of the ListBox. Note there are fewer intermediatory elements in the visual tree doing this way than fiddling around with the ListBox control.
Edit
In light of your comment there is an easy way to toggle the selection behaviour of a ListBox without disabling it. You disable the ListBoxItems it contains instead.
<Grid.Resources>
<Style x:Key="DisabledItem" TargetType="ListBoxItem">
<Setter Property="IsEnabled" Value="False" />
</Style>
</Grid.Resources>
<ListBox x:Name="lst" ItemsSource="{StaticResource TestData}" ItemContainerStyle="{StaticResource DisabledItem}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" Margin="5" />
<TextBlock Text="{Binding Age}" Margin="5" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In this case the ListBox starts of with disabled items. Scrolling however is still possible. But the items appear dimmed and there is no hover or selected highlighting going on.
The code below is able to toggle the "disabled" state on and off.
private void Button_Click(object sender, RoutedEventArgs e)
{
if (lst.ItemContainerStyle == null)
lst.ItemContainerStyle = (Style)LayoutRoot.Resources["DisabledItem"];
else
lst.ItemContainerStyle = null;
}

Resources