Develop Reference

How to set one content to several buttons in WPF

I have some buttons -in different windows- that have the same content. But if two windows surfaced together,out of the first window's button content disappears.
Buttons Style is :
<Style TargetType="{x:Type Button}" x:Key="BSaveBtn">
<Setter Property="Padding" Value="5"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Width" Value="70"/>
<Setter Property="Height" Value="68"/>
<Setter Property="Background" Value="{DynamicResource FlatGreen}"/>
<Setter Property="Template" Value="{DynamicResource FlatGreenBtnHover}"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Content">
<Setter.Value>
<StackPanel Orientation="Vertical" FlowDirection="RightToLeft">
<Image Width="30" Source="/login;component/img/buttonpic/save.png"/>
<TextBlock Text="save" FontSize="16" FontFamily="/login;component/fonts/#Droid Arabic Kufi" Foreground="White" HorizontalAlignment="Center"/>
</StackPanel>
</Setter.Value>
</Setter>
</Style>
button Code in windows is :
<Button Style="{DynamicResource BSaveBtn}" Template="{DynamicResource FlatGreenBtnHover}" />
problems occurs only with content -not another style properties- .

Seems to work fine for me when I tested it here.
A few things I noticed though that may help. You don't need them to be DynamicResource, they should really be StaticResource unless you plan on modifying them.
I assume you are declaring these in the Windows.Resource section or repeating them on each window?
If so you should centralize those to a ResourceDictionary.
Create a new Resource Dictionary put your style in there like so:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type Button}" x:Key="BSaveBtn">
<Setter Property="Padding" Value="5"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Width" Value="70"/>
<Setter Property="Height" Value="68"/>
<Setter Property="Background" Value="{DynamicResource FlatGreen}"/>
<Setter Property="Template" Value="{DynamicResource FlatGreenBtnHover}"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Content">
<Setter.Value>
<StackPanel Orientation="Vertical" FlowDirection="RightToLeft">
<Image Width="30" Source="/login;component/img/buttonpic/save.png"/>
<TextBlock Text="save" FontSize="16" FontFamily="/login;component/fonts/#Droid Arabic Kufi" Foreground="White" HorizontalAlignment="Center"/>
</StackPanel>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Then in your App.xaml put the following:
<ResourceDictionary>
<ResourceDictionary Source="MyResources.xaml" />
</ResourceDictionary>
The Image should really be in a dictionary to avoid loading it multiple times. Just add a line in that ResourceDictionary like so:
<BitmapImage UriSource="/login;component/Images/Save.png" x:Key="Save" PresentationOptions:Freeze="True" />
Setting the PresentationOptions:Freeze will also help if the image is never being modified.
Your call to the image would then change to be:
<StackPanel Orientation="Vertical" FlowDirection="RightToLeft">
<Image Width="30" Source="{StaticResource Save}"/>
<TextBlock Text="save" FontSize="16" FontFamily="/login;component/fonts/#Droid Arabic Kufi" Foreground="White" HorizontalAlignment="Center"/>
</StackPanel>
Once your resources are centralized in a ResourceDictionary (or multiple) it makes it easy to apply those same styles anywhere in your application and hopefully will help with your issue. If not please give more info on the problem you have such as sample code to make the issue happen please.

An instance of an element can only appear once in the visual tree. You can set the x:Shared attribute of the Style to False in order for a new instance of the StackPanel to get created for each Button to which you apply the style:
<Style TargetType="{x:Type Button}" x:Key="BSaveBtn" x:Shared="False">
<Setter Property="Padding" Value="5"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Width" Value="70"/>
<Setter Property="Height" Value="68"/>
<Setter Property="Background" Value="{DynamicResource FlatGreen}"/>
<Setter Property="Template" Value="{DynamicResource FlatGreenBtnHover}"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Content">
<Setter.Value>
<StackPanel Orientation="Vertical" FlowDirection="RightToLeft">
<Image Width="30" Source="/login;component/img/buttonpic/save.png"/>
<TextBlock Text="save" FontSize="16" FontFamily="/login;component/fonts/#Droid Arabic Kufi" Foreground="White" HorizontalAlignment="Center"/>
</StackPanel>
</Setter.Value>
</Setter>
</Style>

Rounded DataGrid Corners?

I am trying to apply some styles to a Datagrid, but I am getting an error.
I am trying to apply rounded corners to a DataGrid.
This is the error I am getting on , <Setter.Value>
The attachable property 'Value' was not found in type 'Setter'
<Style TargetType="{x:Type DataGrid}">
<Setter Property="RowHeaderWidth" Value="0" />
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGrid}">
<Grid>
　　 <Border CornerRadius="5"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Style>
I found this question Datagrid template with rounded corners, but it does help with my question.
How do I get this to work?

Try this, you'll be Ok.
<Style TargetType="{x:Type DataGrid}">
<Setter Property="RowHeaderWidth" Value="0" />
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGrid}">
<Border Background="Red" CornerRadius="5">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You actually didn't specify the name of the property for the Setter.Value. The
<Setter.Value></Setter.Value>
must be enclosed inside a
<Setter Property="NameOfthePropertyToSetTheValueFor"></Setter>
For the case of CornerRadius the property must be Template.

You forgot a
< Setter Property="Template">
2 lines above the ControlTemplate declaration
*remove space before 'Setter':)

The indents are sort of helping you in the issue.
<Style TargetType="{x:Type DataGrid}">
<Setter Property="RowHeaderWidth" Value="0" />
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ControlTemplate">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGrid}">
<Grid>
　　 <Border CornerRadius="5"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Use a ContentPresenter for personnalize a template

I created a ressourceDictionnary for creating a templateButton.
I would like to be able to change the png image when i use this template, i think i need to use a ContentPresenter, but i don't know why.
Here is my RessourceDictionnary :
<ControlTemplate TargetType="{x:Type Button}" x:Key="BoutonRessources">
<Button Width="32" Margin="0,0,7,0" Name="tbrClear" ToolTip="Clear" VerticalAlignment="Center" BorderThickness="0" HorizontalAlignment="Center" Background="Transparent" HorizontalContentAlignment="Center">
<Border>
<Image Source="xRtDiva_XWPF_TBR_PREMIER.PNG_IMAGES.png" Height="18"/>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="Transparent" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="BoutonToolbarSelected.png"/>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="22"/>
<Setter Property="Width" Value="32"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</Button>
So, when i use this Button template, i would like to be able to pass them an other png image to display. For example i would like to replace xRtDiva_XWPF_TBR_PREMIER.PNG_IMAGES.png by MyPicture.png.
How doing this ? With a contentPresenter ?
Thanks :)

WPF TabControl tabs "jumping"

I'm creating a WPF tab control which contains tabs rotated 270° When I mouse the mouse over between tabs they appear to be "jumping". I'm looking for a way to prevent this from happening.The tabs should have the same behaviour as the tabs in Microsoft Office ribbon UI(stay in a fixed position). Is it possible to modify the XAML below to achieve this?
XAML:
<Window x:Class="WpfApplication2.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="350" Width="300" TextOptions.TextFormattingMode="Display" TextOptions.TextRenderingMode="ClearType" UseLayoutRounding="true">
<TabControl TabStripPlacement="Left" BorderThickness="1,0,0,0">
<TabControl.ItemContainerStyle>
<Style TargetType="{x:Type TabItem}">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="270"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#330033" />
<Setter Property="FontSize" Value="9pt"/>
<Setter Property="Height" Value="22" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Background="White" Name="Border" BorderBrush="#A9A9A9" BorderThickness="0" CornerRadius="2,2,0,0">
<Border Padding="2" BorderBrush="Transparent">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,0,12,2"/>
</Border>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.ItemContainerStyle>
<TabItem Header="Tab item 1" />
<TabItem Header="Tab item 2" />
<TabItem Header="Tab item 3" />
</TabControl>
</Window>

I think it would be better to hide a Border when the mouse is not over a tab by setting the Border's BorderBrush to Transparent rather than setting its BorderThickness to zero.
In other words, change
<Border Background="White" Name="Border" BorderBrush="#A9A9A9" BorderThickness="0" CornerRadius="2,2,0,0">
to
<Border Background="White" Name="Border" BorderBrush="Transparent" BorderThickness="1,1,1,0" CornerRadius="2,2,0,0">
and in the IsMouseOver trigger, use
<Setter TargetName="Border" Property="BorderBrush" Value="#A9A9A9" />
in place of a setter on the BorderThickness.
In your case, the border element itself changes size when you change its BorderThickness because the BorderThickness contributes to the 'size' of the Border, and the control inside it doesn't change size.

If you remove the below line (border) from the IsMouseOver trigger it stops jumping and visually it doesn't really have a huge effect (in my opinion).
<Setter TargetName="Border" Property="BorderThickness" Value="0,0,0,0" />

Is there any way to change a single attribute of a template in a trigger in WPF?

So I'm trying to get my TabItem to display a different image depending on whether it's selected or not. Right now I've got it working using the following code:
<Window.Resources>
<local:UnselectedImageFilenameConverter x:Key="UnselectedImageFilenameConverter" />
<local:SelectedImageFilenameConverter x:Key="SelectedImageFilenameConverter" />
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Image Source="{TemplateBinding Header, Converter={StaticResource UnselectedImageFilenameConverter}}" Stretch="None" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Image Source="{TemplateBinding Header, Converter={StaticResource SelectedImageFilenameConverter}}" Stretch="None" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
However this seems quite redundant. I'm changing the whole template when all I need is to change the image source. It seems like there should be a more concise way of doing this, but so far no luck. Any ideas?

You could use a control template instead of a style. In it, you can define a trigger which changes the image source according to your whim.
<ControlTemplate TargetType="{x:Type TabItem}" x:Key="TabItemTemplate">
<Image x:Name="TabImage" Source="{Binding Something}"/>
<ControlTemplate.Triggers>
<Trigger Property="Selector.IsSelected" Value="True">
<Setter Property="Source" TargetName="TabImage" Value="{Binding SomethingElse}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
In the above template, if you want the template to be applied to every tab item by default, remove the x:Key attribute.