Why does this xaml code not work?
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="btnTemplate" TargetType="{x:Type Button}">
<Grid>
<Ellipse Name="el1" Fill="Orange" Width="100" Height="100" />
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="el1" Property="Background" Value="Blue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Grid.Resources>
<Button Content="Klick mich" Template="{StaticResource btnTemplate}"/>
</Grid>
</Page>
You are trying to set the Background property in your Trigger, but the Ellipse doesn't have a Background property. It has a Fill property. So you need to use:
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="btnTemplate" TargetType="{x:Type Button}">
<Grid>
<Ellipse Name="el1" Fill="Orange" Width="100" Height="100" />
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="el1" Property="Fill" Value="Blue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Grid.Resources>
<Button Content="Klick mich" Template="{StaticResource btnTemplate}" />
</Grid>
Related
How can I change the foreground of the Label and the TextBlock in my code with just xaml?
Or is it even possible to change the Label foreground as soon as the Stackpanel IsMouseOver event takes place, with just with xaml?
<Window x:Class="MouseOverTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MouseOverTest"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<!--Color-->
<SolidColorBrush x:Key="BorderDesign" Color="#A73838"/>
<LinearGradientBrush x:Key="ColorDesign" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#A73838" Offset="0"/>
<GradientStop Color="#D87878" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ColorMouseOverDesign" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#D87878" Offset="0"/>
<GradientStop Color="#A73838" Offset="1"/>
</LinearGradientBrush>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="7*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="SP" Orientation="Vertical" Grid.Column="1" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<StackPanel.Resources>
<Style TargetType="{x:Type StackPanel}">
<Setter Property="Background" Value="{StaticResource ColorDesign}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource ColorMouseOverDesign}"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Label}">
<Setter Property="Foreground" Value="Black"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Black"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<Button x:Name="BT" Content="TestButton" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="50" Margin="0,10,0,5"/>
<Label x:Name="L" Content="Test Label" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="50" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
<TextBlock x:Name="TB" Text="This is a Test, a Test TextBlock..." VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Height="50"/>
</StackPanel>
</Grid>
</Window>
The only way I have found so far, was to change it with C# Methods.
But as an result i had for 4 StackPanels 8 Methods...
I canĀ“t find of a proper way to solve this, i would appreciate your help on this problem.
Thanks in advants.
First Question: You can use the Foreground property inside your Label or TextBlock.
Second Question: I've just took one of your Styles and modified it a bit:
<Style TargetType="Label">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>
<Label Margin="10" HorizontalAlignment="Center" Content="Your text" FontSize="20"/>
If you now use a Label as soon as you hover over the Label the Foreground color changes.
I am trying to display the content of a UWP app exactly the same way the content is displayed in the Store app (see above).
I used a ListView, but the Items appear right of the Header, instead of appearing straight below it, as you can see on the following screenshot:
This is my XAML:
<Page.Resources>
<local:Items x:Key="Item"/>
<DataTemplate x:Name="myListViewDataTemplate">
<Grid Margin="0" Width="200">
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Path=ItemImage}" Stretch="UniformToFill"/>
<TextBlock Grid.Row="1" Text="{Binding Path=ItemName}" Margin="0,5,0,0"
VerticalAlignment="Top" HorizontalAlignment="Left" FontSize="20"/>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid Background="LightGray">
<ListView ItemTemplate="{StaticResource myListViewDataTemplate}" ItemsSource="{StaticResource Item}">
<ListView.Header>
<TextBlock Margin="20,10,0,10" Text="Group of items" FontSize="22" FontWeight="SemiBold"/>
</ListView.Header>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="Transparent"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
Any idea on how to solve the problem?
One easy workaround is to just use a TextBlock instead of specifying the Header and place it on top of the ListView, but I prefer your current approach as it's simply neater.
But to make it look like what you want, we will need to modify the default Style of the ListView, which wraps the Header and the items inside a StackPanel(child of an ItemsPresenter). We don't want that, so we first remove the tempate bindings of Header and HeaderTemplate from the ItemsPresenter, and then we replace the root Border with a Grid, finally we add a ContentPresenter as the Header and place it above the ScrollViewer (the parent of the ItemsPresenter).
You can refer to the following Style which does everything that I described above.
<Style x:Key="ListViewStyle1"
TargetType="ListView">
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="TabNavigation"
Value="Once" />
<Setter Property="IsSwipeEnabled"
Value="True" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollMode"
Value="Disabled" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled"
Value="False" />
<Setter Property="ScrollViewer.VerticalScrollMode"
Value="Enabled" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled"
Value="True" />
<Setter Property="ScrollViewer.ZoomMode"
Value="Disabled" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled"
Value="False" />
<Setter Property="ScrollViewer.BringIntoViewOnFocusChange"
Value="True" />
<Setter Property="UseSystemFocusVisuals"
Value="True" />
<Setter Property="ItemContainerTransitions">
<Setter.Value>
<TransitionCollection>
<AddDeleteThemeTransition />
<ContentThemeTransition />
<ReorderThemeTransition />
<EntranceThemeTransition IsStaggeringEnabled="False" />
</TransitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Grid BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ContentPresenter x:Name="Header" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
<ScrollViewer x:Name="ScrollViewer"
Grid.Row="1"
AutomationProperties.AccessibilityView="Raw"
BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
TabNavigation="{TemplateBinding TabNavigation}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<ItemsPresenter FooterTransitions="{TemplateBinding FooterTransitions}"
FooterTemplate="{TemplateBinding FooterTemplate}"
Footer="{TemplateBinding Footer}"
Padding="{TemplateBinding Padding}" />
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then you just apply it to your ListView like this. Oh BTW, make sure you set the VerticalAlignment to Top too.
<ListView VerticalAlignment="Top"
Style="{StaticResource ListViewStyle1}"
...>
Hope this helps!
most probably it could be duplicate but my question is different, i want to create a rounded close corner button in wpf UserControl from the styles. I don't know how can i achive this,
i tried as following.
<Style x:Key="dbokPopupCloseStyle" TargetType="Button">
<Setter Property="Padding" Value="5"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontFamily" Value="seoge UI"/>
<Setter Property="FontSize" Value="17"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="#363636"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" Margin="10,5"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try this
<Window.Resources>
<DataTemplate x:Key="Cancel">
<Viewbox Height="20">
<Canvas Width="31.7872706291756" Height="31.7794719079896">
<Path Fill="{Binding Foreground,RelativeSource={RelativeSource AncestorType={x:Type Button}}}" Data="F1M7.1874998,3.7803054C7.0081378,3.7608244,6.8412588,3.8140474,6.7187498,3.9365554L3.9374998,6.7178054C3.6924818,6.9628234,3.7577738,7.4130804,4.0624998,7.7178054L12.34375,15.999055 4.0624998,24.280305C3.7577728,24.585032,3.6924818,25.035288,3.9374998,25.280305L6.7187498,28.061555C6.9637678,28.306573,7.4140228,28.272532,7.7187498,27.967805L16,19.686555 24.28125,27.967805C24.585977,28.272532,25.036232,28.306573,25.28125,28.061555L28.0625,25.280305C28.307518,25.035287,28.242227,24.585033,27.9375,24.280305L19.65625,15.999055 27.9375,7.7178054C28.242227,7.4130784,28.307518,6.9628194,28.0625,6.7178054L25.28125,3.9365554C25.036232,3.6915374,24.585977,3.7568254,24.28125,4.0615554L16,12.342805 7.7187498,4.0615554C7.5663868,3.9091924,7.3668618,3.7997864,7.1874998,3.7803054z" Stroke="{Binding Foreground,RelativeSource={RelativeSource AncestorType={x:Type Button}}}" StrokeThickness="1"/>
</Canvas>
</Viewbox>
</DataTemplate>
<Style x:Key="Blue_Icon_Tooltipstyle" TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Grid>
<Border CornerRadius="3" Background="Black">
<TextBlock Margin="5" Foreground="White" FontFamily="Segoe Ui Dark" FontSize="12" >
<ContentPresenter></ContentPresenter>
</TextBlock>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CircularButton" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
<Ellipse x:Name="ellipse" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="3"></Ellipse>
<ContentPresenter></ContentPresenter>
<Grid.ToolTip>
<ToolTip Content="{TemplateBinding ToolTip}" HorizontalOffset="-30" Style="{DynamicResource Blue_Icon_Tooltipstyle }" VerticalOffset="-5" VerticalAlignment="Top" Placement="Top"></ToolTip>
</Grid.ToolTip>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsPressed" Value="True" >
<Setter Property="Opacity" Value="0.7" ></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="Red" >
<Button Height="40" Width="40" ToolTip="Cancel" Style="{StaticResource CircularButton}" Background="Black" BorderThickness="1" BorderBrush="White" Foreground="White" ContentTemplate="{StaticResource Cancel}"></Button>
</Grid>
Update
<UserControl.Resources>
<Style x:Key="CircularButton" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
<Ellipse x:Name="ellipse"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}"
Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.FontSize="20" Content="{TemplateBinding Content}"></ContentPresenter>
<Grid.ToolTip>
<ToolTip Content="{TemplateBinding ToolTip}" HorizontalOffset="-30" Style="{DynamicResource Blue_Icon_Tooltipstyle }" VerticalOffset="-5" VerticalAlignment="Top" Placement="Top"></ToolTip>
</Grid.ToolTip>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsPressed" Value="True" >
<Setter Property="Opacity" Value="0.7" ></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Background="Red" >
<Button Height="40" Width="40" ToolTip="Cancel"
Style="{StaticResource CircularButton}"
Background="Black" BorderThickness="1"
BorderBrush="White" Foreground="White" Content="x"></Button>
</Grid>
I'm looking to be able to modify the default Pivot template to change the size of the Pivot Item headers. How might I do this with the following Style
<Style x:Key="PivotStyle" TargetType="phone:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid CacheMode="BitmapCache" Grid.RowSpan="2" >
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Transparent" Offset="0.0" />
<GradientStop Color="Transparent" Offset="1.0" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.Row="2" />
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Margin="24,17,0,-7" />
<Primitives:PivotHeadersControl x:Name="HeadersListElement" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="28" Grid.Row="1"/>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am trying to get this to mimick the following
You can surely change your Pivot Header's font-size, family and so on by changing HeaderTemplate:
<phone:Pivot Title="PivotTest" Style="{StaticResource PivotStyle}">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="10"/>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:PivotItem Header="One">
// item 1
</phone:PivotItem>
<phone:PivotItem Header="Two">
// item 2
</phone:PivotItem>
</phone:Pivot>
EDIT - within a style:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="myHeader">
<TextBlock Text="{Binding}" FontSize="10"/>
</DataTemplate>
<Style x:Key="PivotStyle" TargetType="phone:Pivot">
<Setter Property="HeaderTemplate" Value="{StaticResource myHeader}"/>
<Setter Property="Margin" Value="0"/>
....
I want to use a DataTemplate to change the Header of some TabItems.
So far I have this Code, which works fine:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit" x:Class="SFgame.MainWindow"
Title="SoccerFusion" Height="600" Width="1000" ResizeMode="NoResize" WindowStartupLocation="CenterScreen">
<Grid>
<TabControl TabStripPlacement="Bottom">
<TabControl.Resources>
<Style TargetType="{x:Type TabPanel}">
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<DataTemplate x:Key="mmHeaderTemplate">
<Image Name="mmItem1" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}}" Value="True">
<Setter TargetName="mmItem1" Property="Source" Value="data\Images\Menu\ActiveItem.png" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}}" Value="False">
<Setter TargetName="mmItem1" Property="Source" Value="data\Images\Menu\InactiveItem.png" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</TabControl.Resources>
<TabItem Height="32" Width="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" IsSelected="True">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Height="32" Width="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" >
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Height="32" Width="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" >
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Height="32" Width="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" >
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
</Grid>
</Window>
The only problem is, that now all TabItem-Headers have the same Picture. All TabItems should have different pairs of Pictures fpr active and inactive.
So I guess I would pass the path of the picture as parameter, but I just can't figure out how that works.
The only thing I can find is: "Can't pass Parameters".
If that really doesn't work. Is there an alternative? For example give the TabItem a Name like "TabItem1" and usw the Path "data\Images\Menu\Tabitem1_active.png" and "data\Images\Menu\Tabitem1_inactive.png" as Source? Can I insert the Name of the Binding-Source into a string?
Edit:
I'm a little closer to a solution
<Setter TargetName="mmItem1" Property="Source">
<Setter.Value>
<MultiBinding StringFormat="{}{0}{1}{2}">
<Binding Mode="OneTime" Source="data\Images\Menu\" />
<Binding Mode="OneTime" Source="??????" />
<Binding Mode="OneTime" Source="inactive.png" />
</MultiBinding>
</Setter.Value>
</Setter>
with this code instead of the one on the upper, i can concat three strings. the only thing i need now, is the name of the sourcecontrol/bindingsource
Next Edit:
I'm a little closer i think. I succeeded in getting a string from my tabitem to the Template, by using the Header of the TabItem.
Code looks like this now:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SoccerFusion" Height="400" Width="400">
<Grid>
<TabControl TabStripPlacement="Bottom">
<TabControl.Resources>
<Style TargetType="{x:Type TabPanel}">
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<DataTemplate x:Key="mmHeaderTemplate">
<Grid>
<Image Name="mmImg" />
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, StringFormat='{}{0}'}" />
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}}" Value="True">
????? HERE COMES THE PROBLEM ??????
<Setter TargetName="mmImg" Property="Source" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, StringFormat='{}{0}active.png'}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}}" Value="False">
????? HERE COMES THE PROBLEM ??????
<Setter TargetName="mmImg" Property="Source" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, StringFormat='{}{0}inactive.png'}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</TabControl.Resources>
<TabItem Height="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" IsSelected="True" Header="mmItem1">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Height="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" Header="mmItem2" >
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Height="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" Header="mmItem3" >
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Height="32" HeaderTemplate="{StaticResource mmHeaderTemplate}" Header="mmItem4" >
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
</Grid>
</Page>
The Problem is:
I generate a String and give it to the Image as a Source. Which works fine.
But the Source needs an URI and can't do anything with the String
Any Ideas?