What's wrong with this ContentTemplate? - wpf

I'm getting an error for this content template within a style: "Must specify both Property and Value for Setter." Aren't I doing that?
<Style x:Key="LinkButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label x:Name="ContentRoot">
<StackPanel Orientation="Horizontal">
<Viewbox Width="24" Height="24" VerticalAlignment="Center">
<Image x:Name="ButtonImage" Source="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=Tag}" />
</Viewbox>
<TextBlock VerticalAlignment="Center" x:Name="ButtonText" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=Content}"></TextBlock>
</StackPanel>
</Label>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ButtonText" Property="TextBlock.TextDecorations" Value="Underline"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
And here is a button that will be using this style:
<Button Name="HelpButton" Style="{StaticResource LinkButton}" Height="30" Content="Help" Tag="Help.png"/>
Thanks!

I have loaded this up and have no such problems. The only problem I see is that your button will never have the style applied. This is because if you want the style applied you need to remove the x:Key from the style. Otherwise if you want the style applied only to the HelpButton, the definition should look like this:
<Button Name="HelpButton" Style="{StaticResource LinkButton}" Height="30" Content="Help" Tag="Help.png"/>
But I cannot see the error you are seeing.

Related

Round close button in corner of image

I am creating gallery, it contains images. So I want to remove the images from gallery using close buttons. The position of the close button should be the corner of the every images. How can I create like this corner buttons styles? Any idea?
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel Width="120">
<Button Height="25" VerticalAlignment="Top" Content="Show" Width="100" Margin="5" />
<Image Height="90" Source="{Binding Path=Thumbnail}" MouseLeftButtonDown="Image_MouseLeftButtonDown"/>
<TextBlock TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" Text="{Binding Path=Name}" >
<TextBlock.ToolTip>
<ToolTip Visibility="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget, Converter={StaticResource trimmedVisibilityConverter}}">
<ToolTip.Content>
<TextBlock Text="{Binding Name}"/>
</ToolTip.Content>
</ToolTip>
</TextBlock.ToolTip>
</TextBlock>
</StackPanel>
<!--<Separator Width="5" Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Background="Transparent"/>-->
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
place Image and Button in the same Grid. Align button to top right corner, and add margin to top and right sides of image, so the button goes outside image borders
<Grid>
<Image Margin="0,8,8,0"/>
<Button HorizontalAlignment="Right" VerticalAlignment="Top"
Width="16" Height="16" Content="x"/>
</Grid>
Here's a round button from one of my samples which looks pretty similar to what you're after.
The colours and mouseover may be different.
<SolidColorBrush x:Key="DarkLight" Color="Chocolate"/>
<SolidColorBrush x:Key="BrightMid" Color="PapayaWhip"/>
<Geometry x:Key="CloseIcon">
M19.85228,12.08996L12.093,19.849201 24.242323,31.997846 12.094,44.145998 19.852051,51.904958 32.001186,39.756277 44.150543,51.904958 51.909,44.145994 39.760246,31.997501 51.909,19.849201 44.15049,12.08996 32.001431,24.238849z M32,0C49.671021,3.1599484E-07 64,14.329407 64,31.998501 64,49.677606 49.671021,63.997003 32,63.997003 14.328003,63.997003 0,49.677606 0,31.998501 0,14.329407 14.328003,3.1599484E-07 32,0z
</Geometry>
<Style x:Key="CloseButton" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="{StaticResource BrightMid}"/>
<Setter Property="Background" Value="{StaticResource DarkLight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Background" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
<Border CornerRadius="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}"
Width="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}"
Name="border"
BorderThickness="1"
BorderBrush="Black"
Background="{Binding Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}"
>
<Path Data="{StaticResource CloseIcon}" Stretch="Fill"
Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}"
/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

WPF TabItem - Image Binding - using Triggers

I want to show Image inside of the Title of header in TabControl
This question(WPF TabItem - Image Binding) seems is right, but I have using Triggers and it doesn't help on my code.
Here is what I have Providing:
<TabControl Name="MainTabControl" Margin="0,28,0,0" TabStripPlacement="Top" >
<TabControl.Resources>
<Image x:Key="imgProfile" Source="/Icons/red icons/profile.png" />
<Image x:Key="imgComment" Source="Icons/red icons/notification.png" />
<Style TargetType="TabItem" >
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding}"
MouseDown="UIElement_OnMouseDown"
FontSize="18"
/>
<Image Height="25" Margin="4,0,4,0"
Source="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Tag.Source}" />
</WrapPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" CornerRadius="0" Margin="2,0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="5,2"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent" />
<Setter TargetName="Border" Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource TabItemNormal}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Name="tiProfile" Header="a" Tag="{StaticResource imgProfile}"></TabItem>
<TabItem Name="tiComment" Header="b" Tag="{StaticResource imgComment}"></TabItem>
</TabControl>
the binding from TabItem.HeaderTemplate to the TabItem.Tag must be via FindAncestor of TabItem type.
instead create Images in Resources, create BitmapImage, and bind it the Image.Source.
so, Resources:
<BitmapImage x:Key="imgProfile" Source="/Icons/red icons/profile.png" />
<BitmapImage x:Key="imgComment" Source="Icons/red icons/notification.png" />
Header DataTemplate:
<Image Height="25" Margin="4,0,4,0"
Source="{Binding Tag, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}}" />

Modify expander header children when expanded

I can't figure out how to do it in XAML. I came up with workarounds that use Expanded/Collapsed events, but they just don't feel right.
I have a DataGrid, with groups, that are templated as expanders. I have a button inside expander, that's hidden by default, and only needs to be shown when an expander is expanded.
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Some Text"/>
<Button Name="MyButton" Visibility="Collapsed" Content="Add All"/>
</StackPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
So basically the code in question is right in the middle:
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Some Text"/>
<Button Name="MyButton" Visibility="Collapsed" Content="Add All"/>
</StackPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
I'm trying to set Visibility of the Button to false, when the expander is expanded. I tried using a trigger like the following:
<Expander.Style>
<Style TargetType="Expander">
<Style.Triggers>
<DataTrigger Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="False">
<Setter TargetProperty="MyButton" Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Expander.Style>
, but the compiler doesn't accept it, because it can't find MyButton (I'm guessing because it's inside a header). Any ideas on how I can get this to work?
You have to move the DataTrigger in a ControlTemplate like this:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander Name="Expander" IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Some Text" />
<Button Name="MyButton"
Visibility="Collapsed"
Content="Add All" />
</StackPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsExpanded, ElementName=Expander}" Value="False">
<Setter TargetName="MyButton" Property="Visibility" Value="Visible" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Notes
I explicitly set the name for the Expander, because the construction RelativeSource={RelativeSource Self} points to control himself, and there in GroupItem is no property IsExpanded.
In Setter does not have a TargetProperty property, but there are TargetName.

DataBinding to RelativeSource Tag

I am trying to use the Tag property as the source of a Binding, but the value is null when it gets to the converter.
What am I doing wrong?
Consumer
<Button Style="{StaticResource AddNewItemButtonStyle}" Tag="blah" />
Binding
<Style x:Key="AddNewItemButtonStyle" BasedOn="{StaticResource blueButtonStyle}"
TargetType="{x:Type Button}">
...
<AccessText Text="{Binding RelativeSource={RelativeSource Self},
Path=Tag, Converter={StaticResource AddNewItemForLabel}}">
</Style>
UPDATE
I added a setter for the ToolTip using the same strategy, and that does work BUT only after the second call to the converter (triggered by mousing over).
Can you see why the binding wouldn't work on the first pass?
Is there some place else besides the Tag that I can use more reliably?
2nd UPDATE
Based on Phil's input I changed my style to the xaml below. Must I add a Template property to the style?
<Style x:Key="AddNewItemButtonStyle" BasedOn="{StaticResource blueButtonStyle}" TargetType="{x:Type Button}">
<Setter Property="resx:ResxExtension.DefaultResxName" Value="Smack.Core.Presentation.Resources.MasterDetail"/>
<Setter Property="Content" >
<Setter.Value>
<StackPanel Orientation="Horizontal">
<Image Source="{resx:Resx ResxName=Smack.Core.Presentation.Resources.MasterDetail, Key=bullet_add}" Stretch="Uniform" />
<AccessText VerticalAlignment="Center" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Tag, Converter={StaticResource AddNewItemForLabel}}" />
<ContentPresenter/>
</StackPanel>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Tag, Converter={StaticResource AddNewItemForToolTip}}"/>
<Setter Property="Command" Value="{Binding AddNewItemCommand}" />
</Style>
If you change the xaml in the answer I gave to your other question to
<AccessText Grid.Column="1" VerticalAlignment="Center">
<AccessText.Text>
<MultiBinding StringFormat="{}_{0} {1}">
<Binding Source="{StaticResource Test}"/>
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Tag"/>
</MultiBinding>
</AccessText.Text>
</AccessText>
Then Tag will work.
Or you can use the short form of TemplateBinding
<AccessText Grid.Column="1" VerticalAlignment="Center" Text="{TemplateBinding Tag}"/>
or the long form
<AccessText Grid.Column="1" VerticalAlignment="Center"
Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Tag}"/>
or, your style will work like this (bits deleted for testing):
<Style x:Key="AddNewItemButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Content" >
<Setter.Value>
<StackPanel Orientation="Horizontal">
<AccessText VerticalAlignment="Center"
Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=Tag}" />
<ContentPresenter/>
</StackPanel>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}"/>
</Style>

Custom validation of textbox in WPF

So I'm trying to do something along this example: http://www.codeproject.com/KB/WPF/wpfvalidation.aspx
My Textbox currently looks like this:
<TextBox Height="23" HorizontalAlignment="Left" Margin="118,60,0,0" Name="CreateUserCPRTextbox" VerticalAlignment="Top" Width="120" >
<TextBox.Text>
<Binding Path="Name" UpdateSourceTrigger="LostFocus">
<Binding.ValidationRules>
<validators:TextRangeValidator
MinimumLength="10"
MaximumLength="10"
ErrorMessage="ID has to be 10 letters" />
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
I've directly copied my TextRangeValidator from the example on that website. Nothing happens when I lose focus on the textbox. No matter what I type in it. Any Ideas? :)
Have you set the Validation.ErrorTemplate? It is defined as below in the Application.Resources in the example.You may have missed that
<Application.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel LastChildFill="True">
<TextBlock DockPanel.Dock="Right"
Foreground="Orange"
Margin="5"
FontSize="12pt"
Text="{Binding ElementName=MyAdorner,
Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
</TextBlock>
<Border BorderBrush="Green" BorderThickness="3">
<AdornedElementPlaceholder Name="MyAdorner" />
</Border>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip"
Value="{Binding RelativeSource={RelativeSource Self},
Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
EDIT
Your default value is not triggering the validation routine.To force it to validate for default value you have to set
<validators:TextRangeValidator ValidatesOnTargetUpdated="True"
MinimumLength="10"
MaximumLength="10"
ErrorMessage="ID has to be 10 letters" />
I think you need to set ValidatesOnDataErrors=True in binding for Text to make it work
WPF TextBox Validation
<Style x:Key="TextBoxInError" TargetType="TextBox">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel>
<Grid>
<Polygon Points="20,10,20,0 0,0"
Stroke="Black"
StrokeThickness="1"
Fill="Red"
HorizontalAlignment="Right"
VerticalAlignment="Top"
ToolTip="{Binding ElementName=adorner,
Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"/>
<AdornedElementPlaceholder x:Name="adorner"/>
<AdornedElementPlaceholder Name="customAdorner" VerticalAlignment="Center" >
<Border BorderBrush="red" BorderThickness="1" />
</AdornedElementPlaceholder>
</Grid>
<Border Background="Red" DockPanel.Dock="right" Margin="5,0,0,0"
Width="150" Height="20" CornerRadius="5"
ToolTip="{Binding ElementName=customAdorner,
Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
<TextBlock Text= "{Binding ElementName=customAdorner,
Path=AdornedElement.(Validation.Errors)[0].ErrorContent}" VerticalAlignment="center" HorizontalAlignment="Left"
FontWeight="Bold" Foreground="white" Width="250" />
</Border>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip"
Value="{Binding RelativeSource={x:Static RelativeSource.Self},
Path=(Validation.Errors)[0].ErrorContent}" />
</Trigger>
</Style.Triggers>
</Style>

Resources