I have this old software of mine which I made without following any particular pattern. At the time I found myself stuck with the following problem:
I'm creating some buttons and put them in a Grid. Those button are dynamically created and their creation logic is the following:
Button btn = new Button();
btn.Template = this.FindResource("template") as ControlTemplate;
btn.ContentTemplate = this.FindResource("contentTemplate") as DataTemplate;
var binding = new Binding
{
Source = sourceItem;
}
btn.SetBinding(Button.ContentProperty, binding);
grid.Children.Add(btn);
The sourceItem's class implements INotifyPropertyChanged has two properties:
public class SourceItemClass: INotifyPropertyChanged
{
private bool _online;
public virtual bool Online
{
get => _online;
protected set
{
if (_online != value)
{
_online = value;
NotifyPropertyChanged();
}
}
}
private bool _error;
public virtual bool Error
{
get => _error;
protected set
{
if (_error!= value)
{
_error = value;
NotifyPropertyChanged();
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged([System.Runtime.CompilerServices.CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Which I bound to the button content template like this:
<DataTemplate x:Key="contentTemplate" DataType="{x:Type classes:SourceItemClass}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Some text"/>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="1" Text="Some text" />
<Grid.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding Path= Online}" Value="true">
<Setter Property="Grid.Background" Value="{StaticResource bckgndImg}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
<Grid.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Online}" Value="True">
<Setter Property="TextBlock.Foreground" Value="Black"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Online}" Value="False">
<Setter Property="TextBlock.Foreground" Value="red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
</DataTemplate>
And to the control template like this:
<ControlTemplate x:Key="template" TargetType="{x:Type Button}">
<Border x:Name="buttonBorder">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal">
<Storyboard>
<ThicknessAnimation Storyboard.TargetName="buttonBorder" Storyboard.TargetProperty="BorderThickness"
To="{TemplateBinding BorderThickness}"
Duration="0:0:0.1"/>
<ColorAnimation Storyboard.TargetName="buttonBorder"
Storyboard.TargetProperty="BorderBrush.Color"
To="{TemplateBinding BorderBrush}"
Duration="0:0:0.1"/>
<ThicknessAnimation Storyboard.TargetName="buttonBorder"
Storyboard.TargetProperty="Padding"
To="{TemplateBinding Padding}"
Duration="0:0:0.1"/>
<ThicknessAnimation Storyboard.TargetName="buttonContentPresenter"
Storyboard.TargetProperty="Margin"
To="{TemplateBinding Margin}"
Duration="0:0:0.1"/>
</Storyboard>
</VisualState>
<VisualState Name="MouseOver">
<Storyboard>
<ThicknessAnimation Storyboard.TargetName="buttonBorder" Storyboard.TargetProperty="BorderThickness"
To="3"
Duration="0:0:0.1"/>
<ColorAnimation Storyboard.TargetName="buttonBorder" Storyboard.TargetProperty="BorderBrush.Color"
To="Orange"
Duration="0:0:0.1"/>
<ThicknessAnimation Storyboard.TargetName="buttonBorder" Storyboard.TargetProperty="Padding"
To="5"
Duration="0:0:0.1"/>
<ThicknessAnimation Storyboard.TargetName="buttonContentPresenter" Storyboard.TargetProperty="Margin"
To="-8"
Duration="0:0:0.1"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="buttonContentPresenter" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Border>
<ControlTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Content.Online, RelativeSource={RelativeSource Self}}" Value="false"/>
</MultiDataTrigger.Conditions>
<Setter TargetName="buttonBorder" Property="Background" Value="{StaticResource img1}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Content.Online, RelativeSource={RelativeSource Self}}" Value="True"/>
<Condition Binding="{Binding Content.Error, RelativeSource={RelativeSource Self}}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter TargetName="buttonBorder" Property="Background" Value="{StaticResource img2}"/>
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Problem is: the UI doesn't update when either Online and Error change their values.
I'm trying to figure thins out since too long at this point. Right now I'm periodically recreating buttons, which is not good.
What am I missing?
Wouldn't it be better to use an ItemsCollection in XAML rather than directly in code?
Something like:
<ItemsControl ItemsSource="{Binding ButtonDefinitions}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Name}">
<Button.Template>
<!-- template goes here... -->
</Button.Template>
<Button.ContentTemplate>
<!-- content template goes here... -->
</Button.ContentTemplate>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Or if the templates are stored in a ResourceDictionary:
<ItemsControl ItemsSource="{Binding ButtonDefinitions}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Name}"
Template="{StaticResource template}"
ContentTemplate="{StaticResource contentTemplate}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This keeps your UI separate to your logic.
I assume that the problem is the binding in the ControlTemplate.
But the provided code should be simplified first.
I do not see a problem with the Button instantiation in the code behind.
I attach a sample code that creates the button in the XAML.
I suggest you start with my sample code that shows how to bind in a control that has both a ContentTemplate and a ControlTemplate.
Hope it helps..
<Window.Resources>
<DataTemplate x:Key="contentTemplate" DataType="{x:Type local:SourceItemClass}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Message From Content Template"/>
<TextBlock Grid.Row="1" Text="{Binding Online}"/>
</Grid>
</DataTemplate>
<ControlTemplate x:Key="template" TargetType="Button">
<Border BorderBrush="Aqua" BorderThickness="6">
<StackPanel>
<ContentPresenter x:Name="buttonContentPresenter" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<TextBlock Text="Message From Template"/>
<TextBlock Text="{Binding Content.Online,RelativeSource={RelativeSource TemplatedParent}}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Window.Resources>
<Grid Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Click="Button_Click">Change Online</Button>
<Button Grid.Column="1" Content="{Binding }"
ContentTemplate="{StaticResource ResourceKey=contentTemplate}"
Template="{StaticResource template}"
/>
</Grid>
Related
I have a code like this:
<ListBox Name="lstBox"
ItemsSource="{Binding ViewModelsView}"
SelectedItem="{Binding SelectedAlertViewOutput, Mode=OneWayToSource}">
<ListBox.Style>
<Style TargetType="{x:Type ListBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}" Padding="1" >
<ScrollViewer Padding="{TemplateBinding Padding}" >
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="IsSelected"
Value="{Binding AlertRecord.IsSelected, Mode=TwoWay}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<controls:AlertExpander
Margin="1"
Value="{Binding AlertRecord.AlertCategory}"
IsExpanded="{Binding Path=IsSelected, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
IsActive="{Binding AlertRecord.IsActive, Mode=OneWay }"
StartTime="{Binding AlertRecord.Timestamp, Mode=OneWay}"
StopTime="{Binding AlertRecord.EndTimestamp, Mode=OneWay}"
AlertId="{Binding AlertRecord.Id, Mode=OneWay}"
<controls:AlertExpander.Content>
<ContentPresenter>
</ContentPresenter>
</controls:AlertExpander.Content>
</controls:AlertExpander>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Style>
<ListBox.Resources>
<DataTemplate DataType="{x:Type local:AlertUnknownViewModel}">
<local:AlertUnknownView></local:AlertUnknownView>
</DataTemplate>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="4">
<ContentPresenter Content="{Binding}"></ContentPresenter>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
ListBox uses my control AlertExpander as ListBoxItem.
Is it possible to create a list consisting not only of elements of type AlertExpander? I would like for an element of another type to also use the parameters on which AlertExpander depends.
I have several types of controls that accept the same parameters as AlertExpander, but look different, and I need to display elements of all types in the list, not just AlertExpander.
AlertExpander.xaml:
<Expander
<Control.Style>
<Style TargetType="Expander">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Expander">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Header -->
<ToggleButton Name="HeaderButton">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="IsChecked" Value="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}, UpdateSourceTrigger=PropertyChanged}"/>
<Setter Property="IsEnabled" Value="{Binding Path=Expandable, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Border Grid.Row="1" BorderThickness="1" BorderBrush="Black"
CornerRadius="{Binding BorderCornerRadius, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}, Mode=OneWay}">
</Border>
<!-- Border shade -->
<Border Name="BorderShade" Grid.Row="1" BorderThickness="1" BorderBrush="Transparent" Visibility="Collapsed"
</Border>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2" Margin="10">
<Image.OpacityMask>
<ImageBrush ImageSource="{Binding SelectedItem.IconSource, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}, Mode=OneWay}"/>
</Image.OpacityMask>
<Image.Source>
<MultiBinding Mode="OneWay" Converter="{converters:GrayscaleImageSourceConverter}">
<Binding Path="SelectedItem" RelativeSource="{RelativeSource AncestorType=controls:AlertExpander}"/>
<Binding Path="IsActive" RelativeSource="{RelativeSource AncestorType=controls:AlertExpander}"/>
</MultiBinding>
</Image.Source>
</Image>
<StackPanel x:Name="topHeader" Grid.Row="0" Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Bottom">
</StackPanel>
<Label x:Name="bottomHeader" Grid.Row="1" Grid.Column="1" VerticalAlignment="Top" Background="Transparent" Padding="0,2,0,0" FontSize="9pt"
Content="{Binding AlertHeaderTime, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}, Mode=OneWay}">
</Label>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="BorderShade" Property="Visibility" Value="Visible"/>
</Trigger>
<DataTrigger Binding="{Binding IsAlertHeaderTimeShown, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}, Mode=OneWay}" Value="false">
<Setter TargetName="topHeader" Property="VerticalAlignment" Value="Center"/>
<Setter TargetName="topHeader" Property="Grid.RowSpan" Value="2"/>
<Setter TargetName="bottomHeader" Property="Visibility" Value="Hidden"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Border Grid.Row="1" BorderThickness="1" BorderBrush="Black"
CornerRadius="{Binding BorderCornerRadius, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}, Mode=OneWay, Converter={converters:AlertExpanderCornerRadiusTopConverter}}">
</Border>
<!-- Border shade -->
<Border Name="BorderShade" Grid.Row="1" BorderThickness="1" BorderBrush="Transparent" Visibility="Collapsed"
Background="{Binding MouseOverShade, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}, Mode=OneWay}"
CornerRadius="{Binding BorderCornerRadius, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}, Mode=OneWay, Converter={converters:AlertExpanderCornerRadiusTopConverter}}">
</Border>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2" Margin="10">
<Image.OpacityMask>
<ImageBrush ImageSource="{Binding SelectedItem.IconSource, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}, Mode=OneWay}"/>
</Image.OpacityMask>
<Image.Source>
<MultiBinding Mode="OneWay" Converter="{converters:GrayscaleImageSourceConverter}">
<Binding Path="SelectedItem" RelativeSource="{RelativeSource AncestorType=controls:AlertExpander}"/>
<Binding Path="IsActive" RelativeSource="{RelativeSource AncestorType=controls:AlertExpander}"/>
</MultiBinding>
</Image.Source>
</Image>
<StackPanel x:Name="topHeader" Grid.Row="0" Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Bottom">
<Label Background="Transparent" Padding="0,0,0,2" FontSize="12pt"
FontWeight="{Binding IsActive, Mode=OneWay, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}, Converter={converters:BoolToFontWeightConverter}}"
Content="{Binding AlertHeader, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}, Mode=OneWay}">
</Label>
<Label Background="Transparent" Padding="4,0,0,2" FontSize="12pt"
FontWeight="{Binding IsActive, Mode=OneWay, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}, Converter={converters:BoolToFontWeightConverter}}"
Visibility="{Binding IsActive, Mode=OneWay, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}, Converter={converters:InactiveNoteVisibilityConverter}}"
Content="{Binding InactiveNote, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}, Mode=OneWay}">
</Label>
</StackPanel>
<Label x:Name="bottomHeader" Grid.Row="1" Grid.Column="1" VerticalAlignment="Top" Background="Transparent" Padding="0,2,0,0" FontSize="9pt"
Content="{Binding AlertHeaderTime, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}, Mode=OneWay}">
</Label>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="BorderShade" Property="Visibility" Value="Visible"/>
</Trigger>
<DataTrigger Binding="{Binding IsAlertHeaderTimeShown, RelativeSource={RelativeSource AncestorType=controls:AlertExpander}, Mode=OneWay}" Value="false">
<Setter TargetName="topHeader" Property="VerticalAlignment" Value="Center"/>
<Setter TargetName="topHeader" Property="Grid.RowSpan" Value="2"/>
<Setter TargetName="bottomHeader" Property="Visibility" Value="Hidden"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
<!-- Content -->
<ScrollViewer Name="ContentScrollViewer" Grid.Row="1"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Bottom"
Visibility="Visible">
<Border Name="ExpanderContentBorder" BorderThickness="1,0,1,1" BorderBrush="Black">
<ContentPresenter ContentSource="Content"/>
</Border>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Control.Style>
enter image description here
Before I get to the code, I want to point out that this is a job for data templates, rather than control templates.
The Template property takes a ControlTemplate and is used to define the structure of a control. This is usually used when you are building a control from scratch or significantly altering one. What you want to do is just change how your data is being displayed inside an existing control. For that, there are DataTemplate properties, such as ItemTemplate.
With that out of the way, I put together some code for you that should at least point you in the right direction:
<ListBox Name="lstBox" ItemsSource="{Binding ViewModelsView}" SelectedItem="{Binding SelectedAlertViewOutput, Mode=OneWayToSource}">
<ListBox.Resources>
<DataTemplate DataType="local:AlertRecord" x:Key="AlertExpanderItem">
<controls:AlertExpander Margin="1"
Value="{Binding AlertCategory}"
IsExpanded="{Binding IsSelected, Mode=TwoWay}"
IsActive="{Binding IsActive, Mode=OneWay }"
StartTime="{Binding Timestamp, Mode=OneWay}"
StopTime="{Binding EndTimestamp, Mode=OneWay}"
AlertId="{Binding Id, Mode=OneWay}"/>
</DataTemplate>
<DataTemplate DataType="local:AlertRecord" x:Key="OtherControlItem">
<controls:OtherControl Margin="1"
Value="{Binding AlertCategory}"
IsExpanded="{Binding IsSelected, Mode=TwoWay}"
IsActive="{Binding IsActive, Mode=OneWay }"
StartTime="{Binding Timestamp, Mode=OneWay}"
StopTime="{Binding EndTimestamp, Mode=OneWay}"
AlertId="{Binding Id, Mode=OneWay}"/>
</DataTemplate>
</ListBox.Resources>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<ContentControl Content="{Binding}">
<ContentControl.Style>
<Style TargetType="ContentControl">
<Setter Property="ContentTemplate" Value="{StaticResource OtherControlItem}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Value}" Value="0">
<Setter Property="ContentTemplate" Value="{StaticResource AlertExpanderItem}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
...
public class AlertRecord
{
...
public bool HasPositiveValue { get { return Value >= 0 } }
...
}
I start by defining two different ItemTemplates inside inside the Resources of the ListBox. You would define one for each of the different controls you need to use. Notice that I left off "AlertRecord." from the bindings. That is because each DataTemplate instance will have the AlertRecord as its DataContext.
For the ItemTemplate property, I borrowed from this answer here: https://stackoverflow.com/a/10191762/5086631. I made a DataTemplate with a ContentControl and used the Style to change the ContentTemplate based on DataTriggers. This lets you change the template based on the properties of your list item.
Based on your comment, the style is set up so that "OtherControlItem" (the non-expander control) is used by default, and AlertExpanderItem is used when HasPositiveValue returns true. HasPositiveValue is a property you would need to add to AlertRecord.
I am trying to Create a Custom Control by extending the DataGrid in WPF, but the problem is that when I use this custom control in view and Provide the specific columns by setting the AutoGenerateColumns to False, the columns is not getting generated. In the OnApplyTemplate() when I tried to fetch the Datagrid through the Template it shows as column count as 0, whereas in the view in code behind it shows the no of columns correctly whatever is specified in the xaml.
Where I am wrong or something extra needs to be set for this?
My Custom control code-
public class DataGridControl: DataGrid
{
static DataGridControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(DataGridControl), new FrameworkPropertyMetadata(typeof(DataGridControl)));
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
DataGrid dataGrid = Template.FindName("PART_DataGrid", this) as DataGrid;
int noOfColumns = dataGrid.Columns.Count// (0 it should come as 3)
}
}
Generic.xaml(inside the Control Template and border)
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
.....
xmlns:local="clr-namespace:Siemens.WPF.DataGridControl">
<LinearGradientBrush x:Key="lightBrushBack" EndPoint="0.5,1" StartPoint="0.5,0">
.....
</LinearGradientBrush>
<LinearGradientBrush x:Key="normalBrushBack" EndPoint="0.5,1" StartPoint="0.5,0">
......
</LinearGradientBrush>
<Style TargetType="{x:Type local:DataGridControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:DataGridControl}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<DataGrid x:Name="PART_DataGrid"
ItemsSource="{TemplateBinding ItemsSource}"
AutoGenerateColumns="{TemplateBinding AutoGenerateColumns}">
<DataGrid.Resources>
<!--A custom DataGridColumnHeadersPresenter is required to "not" display the custom ColumnHeader template as background of the datagrid header-->
<Style TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Grid>
<!--"part_fillercolumnheader" (DataGridColumnHeader type) is removed, and a plain rectangle is placed in its place.-->
<Rectangle Fill="{StaticResource normalBrushBack}" />
<!--Leave the item presenter in its place.-->
<ItemsPresenter x:Name="itemsPresenter" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--End of custom DataGridColumnHeadersPresenter template-->
<!--Custom Column Header Gripper styling-->
<Style x:Key="ColumnHeaderGripperStyle" TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="3"/>
<Setter Property="Foreground" Value="Transparent" />
<Setter Property="Cursor" Value="SizeWE"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--Custom Column Header template to show extra elements in the header-->
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<!--Let's keep the top section grid to contain the DataGridHeaderBorder, and left+right thumbs.-->
<Grid x:Name="fullHeader" Background="{StaticResource normalBrushBack}">
<!--Here is the theme based DataGridHeaderBorder. I've used Aero here.-->
<aero:DataGridHeaderBorder x:Name='HeaderBorder'
SortDirection="{TemplateBinding SortDirection}"
IsHovered="{TemplateBinding IsMouseOver}"
IsPressed="{TemplateBinding IsPressed}"
IsClickable="{TemplateBinding CanUserSort}"
BorderThickness="0,0,1,1"
BorderBrush="{TemplateBinding Foreground}"
Background="Transparent"
SeparatorVisibility="{TemplateBinding SeparatorVisibility}"
SeparatorBrush="#FFC9CACA">
<!--Put 3 elements inside the border: Content of header, a drop down button, and a sort order indicator.-->
<Grid Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition MinHeight="15" Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!--For ContentPresenter-->
<ColumnDefinition Width="*" />
<!--For drop down button-->
<ColumnDefinition Width="23" />
<!--For sort order indicator-->
<ColumnDefinition Width="12" />
</Grid.ColumnDefinitions>
<!--A hidden rectangle is placed to be shown when mouse hovers on the column (to highlight the column.)-->
<Rectangle x:Name="HoverRectangle"
Stretch="Fill"
Grid.ColumnSpan="3"
Fill="{StaticResource lightBrushBack}"
Opacity="0"
StrokeThickness="0" />
<!--Content of the header.-->
<ContentPresenter Grid.Column="0"
Grid.Row="0"
Margin="2,0,0,0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
Cursor="{TemplateBinding Cursor}" />
<!--A drop down filter button.-->
<Button x:Name="PART_FilterBtn"
HorizontalAlignment="Right"
Command="{Binding FilterClickCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"
CommandParameter="{Binding ElementName=HeaderBorder}"
Grid.Row="0" Cursor="Hand"
Grid.Column="1">
<Button.Template>
<ControlTemplate>
<Path Data="M 0,0 L 1,1 1,3 2,3 2,1 3,0 Z"
Stretch="UniformToFill"
Stroke="{TemplateBinding Foreground}"
Fill="{TemplateBinding Foreground}"
Margin="4,4,0,4"/>
</ControlTemplate>
</Button.Template>
</Button>
<Path x:Name="PART_SortArrow"
Grid.Column="2"
HorizontalAlignment="Center" VerticalAlignment="Center"
Width="8"
RenderTransformOrigin=".5,.5"
Visibility="Visible"
Fill="{TemplateBinding Foreground}"
Stretch="Uniform"
Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z">
</Path>
</Grid>
</aero:DataGridHeaderBorder>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="PART_SortArrow" Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property='IsMouseOver' SourceName="fullHeader" Value='True'>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.20000"
Storyboard.TargetName="HoverRectangle"
Storyboard.TargetProperty="(UIElement.Opacity)"
To='1.0' />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.20000"
Storyboard.TargetName="HoverRectangle"
Storyboard.TargetProperty="(UIElement.Opacity)"
To='0' />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush options:Freeze="True" StartPoint="0.504,0.03" EndPoint="0.504,1.5">
<GradientStop Offset="0.0" Color="#E3F7FF" />
<GradientStop Offset="0.3" Color="#E3F7FF" />
<GradientStop Offset="0.35" Color="#BCECFE" />
<GradientStop Offset="1.0" Color="#B9E9FC" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#69BBE3" />
</DataTrigger>
</Style.Triggers>
</Style>
<!--End of custom DataGridColumnHeader template-->
</DataGrid.Resources>
</DataGrid>
<Popup x:Name="PART_PopUp"
Grid.Column="3"
AllowsTransparency="True"
AllowDrop="True"
Width="200"
Height="253"
MinHeight="253"
MaxHeight="253"
PopupAnimation="Slide"
VerticalOffset="-15"
IsOpen="{Binding IsFilterPopUpVisible,RelativeSource={RelativeSource AncestorType=local:DataGridControl}}"
PlacementTarget="{Binding ElementName=PART_FilterBtn}"
StaysOpen="False"
Placement="Mouse" >
<Border Background="White" BorderBrush="DarkGray" BorderThickness="2">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" Margin="10,5,0,5">
<Button Margin="10,0,0,0" Name="PART_SelectAllBtn" Command="{Binding SelectAllClickCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}" CommandParameter="{Binding ElementName=PART_ListBox}" >
<Button.Template>
<ControlTemplate>
<TextBlock Text="Select All" Foreground="Blue" Cursor="Hand" />
</ControlTemplate>
</Button.Template>
</Button>
<Button Margin="30,0,0,0" Name="PART_SelectNoneBtn" Command="{Binding SelectNoneClickCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}" CommandParameter="{Binding ElementName=PART_ListBox}" >
<Button.Template>
<ControlTemplate>
<TextBlock Text="Select None" Foreground="Blue" Cursor="Hand" />
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
<TextBox x:Name="PART_TextBox" Width="185" Height="25" Text="" Margin="3,0,3,3"/>
<ListBox x:Name="PART_ListBox"
Height="160"
MaxHeight="160"
MinHeight="160"
Width="185"
SelectionMode="Multiple"
DisplayMemberPath="Value"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
ItemsSource="{Binding FilterCollectionList, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}" Margin="0,0,0,5"
ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem" >
<CheckBox x:Name="PART_CheckBox" Margin="5,2" IsChecked="{Binding IsSelected}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked">
<i:InvokeCommandAction Command="{Binding CheckedCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<i:InvokeCommandAction Command="{Binding CheckedCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<ContentPresenter />
</CheckBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
<StackPanel Orientation="Horizontal" Margin="0,0,0,15" HorizontalAlignment="Center">
<Button x:Name="PART_OkBtn" Height="22" Width="70" Content="Ok"
IsEnabled="{Binding IsOkButtonEnabled, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"
Command="{Binding OkButtonClickCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"
/>
<Button x:Name="PART_CancelBtn" Height="22" Width="70" Content="Cancel" Margin="5,0,0,0"
Command="{Binding CancelButtonClickCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"
/>
</StackPanel>
</StackPanel>
</Border>
</Popup>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MainWindow.xaml
<dataGrid:DataGridControl x:Name="dataGridControl" AutoGenerateColumns="False">
<dataGrid:DataGridControl.Columns>
<DataGridTextColumn Header="RollNo" Binding="{Binding RollNo}" />
<DataGridTextColumn Header="Name" Binding="{Binding Name}" />
<DataGridTextColumn Header="FirstName" Binding="{Binding FirstName}" />
</dataGrid:DataGridControl.Columns>
</dataGrid:DataGridControl>
MainWindow.xaml.cs
public MainWindow()
{
InitializeComponent();
List<Student> studList =
new List<Student>() { new Student { RollNo = 1, Name = "Full Name
1", FirstName = "FirstName1", LastName="LastName1", Address =
"Pune1", PinCode= "411057"},};
dataGridControl.ItemsSource = studList;
int noOfColumns = dataGridControl.Columns.Count; //(showing 3 as expected)
}
Create property for custom control
#region GridColumns
private ObservableCollection<DataGridColumn> _gridColumns;
public ObservableCollection<DataGridColumn> GridColumns
{
get => _gridColumns;
}
#endregion GridColumns
Add columns from created property using method OnApplyTemplate
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
if (!AutoGenerateColumns)
{
var grid = GetTemplateChild("PART_Grid") as DataGrid;
foreach (var column in _gridColumns)
grid.Columns.Add(column);
}
}
Change MainWindow.xaml
<dataGrid:DataGridControl x:Name="dataGridControl" AutoGenerateColumns="False">
<dataGrid:DataGridControl.GridColumns>
<DataGridTextColumn Header="RollNo" Binding="{Binding RollNo}" />
<DataGridTextColumn Header="Name" Binding="{Binding Name}" />
<DataGridTextColumn Header="FirstName" Binding="{Binding FirstName}" />
</dataGrid:DataGridControl.GridColumns>
</dataGrid:DataGridControl>
I created a ribbon in WPF using .NET 4.0 framework. I am trying to make use of ToolTipTitle, ToolTipDescription and ToolTipFooterDescription. Since my tooltips will have hyperlinks, how can I make it so that when the mouse hovers over the tooltip, the tooltip stays open?
<rib:RibbonMenuButton ToolTipTitle="Title" ToolTipDescription="My Description" ToolTipFooterDescription="My Footer With a Link">
A good example of this functionality is with Microsoft Excel. When you hover over a ribbon button, an advanced tool tip will display to the user, and if the user hovers over the tooltip, it will remain open. I am trying to mimic that functionality.
I've updated my answer, the below is a well tested solution to my problem and will mimic Microsoft Office's tooltip generation:
First, create the popup control:
<Popup x:Class="WPF.Tooltip" AllowsTransparency="True"
x:Name="TT_Popup_Control"
xmlns:WPF="clr-namespace:Project_Namespace.WPF"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Project_Namespace"
mc:Ignorable="d"
d:DesignHeight="100" d:DesignWidth="300">
<Grid>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="5" />
<Setter Property="FontFamily" Value="Sans Serif" />
<Setter Property="FontSize" Value="11" />
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
<Style TargetType="{x:Type TextBlock}" x:Key="WrappingStyle">
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
</Grid.Resources>
<Border BorderBrush="LightGray" BorderThickness="1,1,0,0">
<Border
BorderThickness="0,0,15,15"
BorderBrush="Transparent"
CornerRadius="0"
Margin="0"
>
<Border.Effect>
<DropShadowEffect BlurRadius="10" Opacity="0.8" ShadowDepth="5" Direction="-40" RenderingBias="Quality" />
</Border.Effect>
<StackPanel Background="#efefef">
<Grid Margin="5,0,5,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<!-- Title -->
<TextBlock Grid.ColumnSpan="2" Grid.Row="0" FontWeight="Bold" Text="{Binding Title, ElementName=TT_Popup_Control}" />
<!-- Description -->
<TextBlock Grid.Column="0" Grid.Row="1">
<ContentPresenter Content="{Binding Image, ElementName=TT_Popup_Control}" />
</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1">
<ContentPresenter Content="{Binding Desc, ElementName=TT_Popup_Control}">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource WrappingStyle}"/>
</ContentPresenter.Resources>
</ContentPresenter>
</TextBlock>
<Separator Grid.ColumnSpan="2" Grid.Row="2" />
<!-- Image -->
<TextBlock Grid.ColumnSpan="2" Grid.Row="3">
<Image Margin="0,0,10,0" Width="16" Source="pack://application:,,,/Path/To/Image/help_icon.png" />
<TextBlock Margin="0,-5,0,0">
<Hyperlink RequestNavigate="Hyperlink_RequestNavigate" NavigateUri="{Binding Footer, ElementName=TT_Popup_Control}">Tell Me More</Hyperlink>
</TextBlock>
</TextBlock>
</Grid>
</StackPanel>
</Border>
</Border>
</Grid>
</Popup>
Next, create the code behind for this control. For those of you who want the C# equivalent, you can head here. This is where I got the reference for creating a control template.
Imports System.Windows
Namespace WPF
Public Class Tooltip
Public Shared ReadOnly TitleProperty As DependencyProperty = DependencyProperty.Register("Title", GetType(Object), GetType(WPF.Tooltip), New PropertyMetadata(vbNull))
Public Shared ReadOnly DescProperty As DependencyProperty = DependencyProperty.Register("Desc", GetType(Object), GetType(WPF.Tooltip), New PropertyMetadata(vbNull))
Public Shared ReadOnly FooterProperty As DependencyProperty = DependencyProperty.Register("Footer", GetType(Object), GetType(WPF.Tooltip), New PropertyMetadata(vbNull))
Public Shared ReadOnly ImageProperty As DependencyProperty = DependencyProperty.Register("Image", GetType(Object), GetType(WPF.Tooltip), New PropertyMetadata(vbNull))
Public Property Title As Object
Get
Return GetValue(TitleProperty)
End Get
Set(value As Object)
SetValue(TitleProperty, value)
End Set
End Property
Public Property Desc As Object
Get
Return GetValue(DescProperty)
End Get
Set(value As Object)
SetValue(DescProperty, value)
End Set
End Property
Public Property Footer As Object
Get
Return GetValue(FooterProperty)
End Get
Set(value As Object)
SetValue(FooterProperty, value)
End Set
End Property
Public Property Image As Object
Get
Return GetValue(ImageProperty)
End Get
Set(value As Object)
SetValue(ImageProperty, value)
End Set
End Property
Private Sub Hyperlink_RequestNavigate(sender As Object, e As Navigation.RequestNavigateEventArgs)
System.Diagnostics.Process.Start(e.Uri.ToString())
End Sub
End Class
End Namespace
The third step is to create the popup functionality, which is best done via styles. I created my style as a resource dictionary (you can call it PopupStyle.xaml, but you can also embed your style directly within the popup xaml control markup:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic"
xmlns:System="clr-namespace:System;assembly=mscorlib">
<Style x:Key="TT_Popup" TargetType="Popup">
<Setter Property="VerticalOffset" Value="20" />
<Setter Property="MaxWidth" Value="500" />
<Setter Property="MinWidth" Value="50" />
<Style.Triggers>
<DataTrigger Binding="{Binding PlacementTarget.IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="OpenPopupStoryBoard" >
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" FillBehavior="HoldEnd">
<DiscreteBooleanKeyFrame KeyTime="0:0:1.00" Value="True"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<PauseStoryboard BeginStoryboardName="OpenPopupStoryBoard"/>
<BeginStoryboard x:Name="ClosePopupStoryBoard">
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" FillBehavior="HoldEnd">
<DiscreteBooleanKeyFrame KeyTime="0:0:0.35" Value="False"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding PlacementTarget.IsMouseCaptured, RelativeSource={RelativeSource Self}}" Value="True">
<DataTrigger.EnterActions>
<PauseStoryboard BeginStoryboardName="OpenPopupStoryBoard"/>
<BeginStoryboard x:Name="CloseImmediatelyPopupStoryBoard" >
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" FillBehavior="HoldEnd">
<DiscreteBooleanKeyFrame KeyTime="0:0:0.0" Value="False"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding PlacementTarget.IsMouseOver, RelativeSource={RelativeSource Self}}" Value="False">
<DataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="CloseImmediatelyPopupStoryBoard" />
</DataTrigger.ExitActions>
</DataTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<PauseStoryboard BeginStoryboardName="ClosePopupStoryBoard" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<PauseStoryboard BeginStoryboardName="OpenPopupStoryBoard"/>
<ResumeStoryboard BeginStoryboardName="ClosePopupStoryBoard" />
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
And finally, you must call your newly created ToolTip control in your Xaml markup like so:
<UserControl xmlns:WPF="clr-namespace:Project_Namespace.WPF"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
>
<UserControl.Resources>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="PopupStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Button x:Name="button_name" />
<!-- Tooltips -->
<WPF:Tooltip Style="{StaticResource TT_Popup}" PlacementTarget="{Binding ElementName=button_name}">
<WPF:Tooltip.Title>
Tooltip Title
</WPF:Tooltip.Title>
<WPF:Tooltip.Image>
<Image Source="pack://application:,,,/Path/To/Image.png" />
</WPF:Tooltip.Image>
<WPF:Tooltip.Desc>
Your Description here
</WPF:Tooltip.Desc>
<WPF:Tooltip.Footer>
www.example.com
</WPF:Tooltip.Footer>
</WPF:Tooltip>
</Grid>
</UserControl
So this may be a complicated way to achieve this functionality, however once implemented, these tooltips are much better than the default tooltips, especially if you require user interaction.
I am making a card game and I want to display cards in player's hand half-covered be each other. How can I do that using ListView or StackPanel? Here is an example how I would like to display player hand.
<Grid Background="Green" >
<Image x:Name="One" Width="100" Height="100" Margin="10,10,250,210"/>
<Image x:Name="Two" Width="100" Height="100" Margin="10,10,210,210"/>
</Grid>
UPDATE
I set margins for ListView's ItemContainerStyle and it worked, but I have another problem. Width of ListView items doesn't fit the image and there is some spacing. How do I remove that. See image below the XAML code.
<ListView Grid.Row="0" Grid.Column="0">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="0, 0, -80, 0"></Setter>
<Setter Property="Height" Value="100"></Setter>
<Setter Property="Width" Value="100"></Setter>
</Style>
</ListView.ItemContainerStyle>
<Image x:Name="One" MaxWidth="100" Height="100" />
<Image x:Name="Two" MaxWidth="100" Height="100" />
</ListView>
I would use Canvas in the list, and draw your card to the canvas, because things drawn in a canvas are not clipped, and instead managed through the canvas ZIndex etc.
Size the canvas based on your desired spacing, and oversize the contents. I'd also recommend binding to Items-source when using listboxes and using templates.
BTW I'm defining my cards using solidColorBrushes so I can just draw rectangles, replace this with your image source. I've defined my source in the resources, but in reality it would be bound to an ObservableCollection (Say, PlayersCurrentHand or something):
<UserControl.Resources>
<x:Array Type="{x:Type SolidColorBrush}" x:Key="Cards">
<SolidColorBrush Color="Blue"/>
<SolidColorBrush Color="Red"/>
<SolidColorBrush Color="White"/>
<SolidColorBrush Color="White"/>
<SolidColorBrush Color="White"/>
<SolidColorBrush Color="White"/>
</x:Array>
</UserControl.Resources>
Now, I presume you are using ListBox because you want to support selection? If so, the way WPF highlights list box items will mess up with this overlap, so we will need to replace it. If you don't want selection, just use an itemsControl and you can skip all the selection stuff.
Here's our basic listbox:
<ListView ItemsSource="{StaticResource Cards}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="112,98,-325,-25" Width="513" Height="227">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<Rectangle Fill="{Binding}" Width="60" Height="100"/>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Which gives us this:
Now, we want to have all the list items to be drawn in a canvas, so let's define our ItemContainerStyle:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<StackPanel>
<Canvas Width="15" Height="100">
<ContentPresenter />
</Canvas>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
See how we've set the canvas Width to 15? That defines the spacing of our cards. All the canvases are stacked at intervals of 15. However, the Rectangles we are drawing in our DateTemplate is Width 60, so these spill off to the right.
We've overridden the messy standard selection and highlighting styles. But no we don't know what's highlighted and selected, so let's add some functionality back in. We can also add things like shadows etc:
<ControlTemplate TargetType="{x:Type ListViewItem}">
<StackPanel>
<Canvas Width="15" Height="100">
<Rectangle x:Name="Highlight" Width="60" Height="5" Canvas.Top="105"/>
<Rectangle Fill="#50000000" Width="60" Height="100" Margin="5,0,-5,0"/>
<ContentPresenter />
</Canvas>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Highlight" Property="Fill" Value="Yellow"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Panel.ZIndex" Value="99"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
So now we have this:
Note, the gif didn't render the selection exactly right. The width issue is going to be tricky to fix without some code behind I think. One option is to make an IValueConverter that calculates width given the List of cards, and binding it to the Listview's Width property.
Edit
Found a way to get around the size issue! Padding! Of course. However, I found the scroll viewer clips even the canvas it contains (which makes sense if you think about it) but leaves all our effort hidden:
So you have to overwrite the scroll viewer functionality by setting the ControlTemplate manually:
<ListBox.Template>
<ControlTemplate>
<Border Padding="5,25,55,15" BorderBrush="Gray" BorderThickness="1">
<ItemsPresenter />
</Border>
</ControlTemplate>
</ListBox.Template>
So now the padding accounts for the last card sticking out an extra 50.
Total code, with some more visual tweaks:
<ListView ItemsSource="{StaticResource Cards}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20" BorderBrush="Black">
<ListBox.Template>
<ControlTemplate>
<Border Padding="5,25,55,15" BorderBrush="Gray" BorderThickness="1">
<ItemsPresenter />
</Border>
</ControlTemplate>
</ListBox.Template>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True" ClipToBounds="False" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<StackPanel>
<Canvas Width="15" Height="100">
<Rectangle x:Name="Highlight" Width="60" Height="5" Canvas.Top="105"/>
<ContentPresenter x:Name="CardPresenter"/>
</Canvas>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Panel.ZIndex" Value="99"/>
<Setter TargetName="CardPresenter" Property="Canvas.Top" Value="-5"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Highlight" Property="Fill" Value="Yellow"/>
<Setter TargetName="CardPresenter" Property="Canvas.Top" Value="-20"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Border Background="#60000000" BorderThickness="0" CornerRadius="5" Height="100" Margin="5,0,-5,0"/>
<Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Background="{Binding}" Width="60" Height="100"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
It's pretty flexible, it was easy to add the "sticking out" functionality. Animations would be the next big step.
Edit 2
I'm just playing now. I'm not sure I like the "jump to the front" functionality, would be better if they just peeked out. Also, fanning them out (using a multi-binding):
Using the following template:
<ControlTemplate TargetType="{x:Type ListViewItem}">
<StackPanel>
<Canvas Width="15" Height="100">
<Rectangle x:Name="Highlight" Width="60" Height="5" Canvas.Top="105"/>
<ContentPresenter x:Name="CardPresenter">
<ContentPresenter.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="TranslateTransformHighlight"/>
<RotateTransform x:Name="RotateTransformHighlight" CenterY="100"/>
<TranslateTransform x:Name="TranslateTransformSelect"/>
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Canvas>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="TranslateTransformHighlight" Duration="0:0:0.200" To="-5" Storyboard.TargetProperty="Y" />
<DoubleAnimation Storyboard.TargetName="RotateTransformHighlight" Duration="0:0:0.200" To="-5" Storyboard.TargetProperty="Angle" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="TranslateTransformHighlight" Duration="0:0:0.200" To="0" Storyboard.TargetProperty="Y" />
<DoubleAnimation Storyboard.TargetName="RotateTransformHighlight" Duration="0:0:0.200" To="0" Storyboard.TargetProperty="Angle" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Highlight" Property="Fill" Value="Yellow"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="TranslateTransformSelect" Duration="0:0:0.200" To="-15" Storyboard.TargetProperty="Y" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="TranslateTransformSelect" Duration="0:0:0.200" To="0" Storyboard.TargetProperty="Y" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I have the following Button and Style in WPF and I need to generalize the Binding in the DataTrigger section because I have near 10 similar buttons in the same Window and each button should be binded to a different property (SelectedPositions, SelectedAgencies, ....). Is it possible to implement?
<Button x:Name="btnPosition"
Grid.Row="0"
Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Command="{Binding PositionFilterCommand}"
Content="{l:Translate position}"
Style="{StaticResource NewButtonStyle}" />
<Style x:Key="NewButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White" />
<Setter Property="Height" Value="22" />
<Setter Property="Width" Value="Auto" />
<Setter Property="FontFamily" Value="OpenSans" />
<Setter Property="FontSize" Value="13" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Margin" Value="10,2,10,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="3">
<Grid x:Name="gridButton" Background="#54728e">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image x:Name="img"
Grid.Column="0"
Width="24"
Height="24"
Source="Img/tick-white.png"
Visibility="Visible" />
<Rectangle x:Name="rect"
Grid.Column="1"
Fill="#54728e"
RadiusX="3"
RadiusY="3" />
<ContentPresenter Grid.Column="1"
Margin="5,0,5,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding SelectedPositions}" Value="{x:Static sys:String.Empty}">
<Setter TargetName="rect" Property="Fill" Value="#8bbcdf" />
<Setter TargetName="img" Property="Visibility" Value="Collapsed" />
<Setter TargetName="gridButton" Property="Background" Value="#8bbcdf" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
could you provide me an example of what you explained?
Sure,
1 - Using Tag
In your Style have your DataTrigger as:
<DataTrigger Binding="{Binding Path=Tag,
RelativeSource={RelativeSource Self}}"
Value="{x:Static sys:String.Empty}">
...
</DataTrigger>
as for usage:
<Button x:Name="btnPosition"
Grid.Row="0"
Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Command="{Binding PositionFilterCommand}"
Content="{l:Translate position}"
Tag="{Binding SelectedPositions}"
Style="{StaticResource NewButtonStyle}" />
2 - Using Attached Property:
"local:" refers to the xaml namespace alias of your application or if you use different namespaces, the namespace where MyCustomPropertyCollection is declared.
code-behind:
public class MyCustomPropertyCollection {
public static readonly DependencyProperty SomeStringProperty =
DependencyProperty.RegisterAttached(
"SomeString",
typeof(string),
typeof(MyCustomPropertyCollection),
new FrameworkPropertyMetadata(string.Empty));
public static void SetSomeString(UIElement element, string value) {
element.SetValue(SomeStringProperty, value);
}
public static string GetSomeString(UIElement element) {
return (string)element.GetValue(SomeStringProperty);
}
}
Style.DataTrigger
<DataTrigger Binding="{Binding Path=(local:MyCustomPropertyCollection.SomeString),
RelativeSource={RelativeSource Self}}"
Value="{x:Static sys:String.Empty}">
...
</DataTrigger>
usage:
<Button x:Name="btnPosition"
Grid.Row="0"
Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Command="{Binding PositionFilterCommand}"
Content="{l:Translate position}"
local:MyCustomPropertyCollection.SomeString="{Binding SelectedPositions}"
Style="{StaticResource NewButtonStyle}" />
3 - Normal Dependency Property
custom Button class:
public class MyButton : Button {
public static readonly DependencyProperty SomeStringProperty =
DependencyProperty.Register(
"SomeString",
typeof(string),
typeof(MyButton),
new FrameworkPropertyMetadata(string.Empty));
public string SomeString {
get {
return (string)GetValue(SomeStringProperty);
}
set {
SetValue(SomeStringProperty, value);
}
}
}
Style in xaml not only needs DataTrigger updated but Style definition too.
so switch
<Style x:Key="NewButtonStyle" TargetType="{x:Type Button}">
to
<Style x:Key="NewButtonStyle" TargetType="{x:Type local:MyButton}">
Style.DataTrigger
<DataTrigger Binding="{Binding Path=SomeString,
RelativeSource={RelativeSource Self}}"
Value="{x:Static sys:String.Empty}">
...
</DataTrigger>
usage:
<local:MyButton x:Name="btnPosition"
Grid.Row="0"
Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Command="{Binding PositionFilterCommand}"
Content="{l:Translate position}"
SomeString="{Binding SelectedPositions}"
Style="{StaticResource NewButtonStyle}" />
Tag approach is frowned upon. "Attached Property" is easier to implement but isn't as clear of a indicator of dependencies as a custom class with a normal DP and AP also gets way overused. Take your pick for what you'd prefer.