How to reuse behaviors? - xaml

Have two behaviors that change a path's opacity based on its container button's IsEnabled property. I have several buttons that I want to reuse these two behaviors for that have the same path up to their containers. How do I do that?
<Button x:Name="buttonConcentration">
<Canvas Width="42.6667" Height="42.6667">
<Path Opacity="0.2" Width="42.835" Height="42.696" Stretch="Fill"
Data="..." UseLayoutRounding="False">
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior
Binding="{Binding IsEnabled, ElementName=buttonConcentration}"
Value="False">
<Core:ChangePropertyAction PropertyName="Opacity" Value="0.2"/>
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior
Binding="{Binding IsEnabled, ElementName=buttonConcentration}"
Value="True">
<Core:ChangePropertyAction PropertyName="Opacity" Value="1"/>
</Core:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Path>
</Canvas>
</Button>

Try setting it on your Window.Resources.
Maybe working over this code you'll be able to achieve what you are expecting:
<Window.Resources>
<Button x:Key="myButtonConcentration" x:Shared="False">
<Canvas Width="42.6667" Height="42.6667">
<Path Opacity="0.2" Width="42.835" Height="42.696" Stretch="Fill"
Data="..." UseLayoutRounding="False">
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior
Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled}"
Value="False">
<Core:ChangePropertyAction PropertyName="Opacity" Value="0.2"/>
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior
Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled}"
Value="True">
<Core:ChangePropertyAction PropertyName="Opacity" Value="1"/>
</Core:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Path>
</Canvas>
</Button>
</Window.Resources>
<Grid>
<ContentControl Name="MyButton1" Content="{StaticResource myButtonConcentration}" />
<ContentControl Name="MyButton2" Content="{StaticResource myButtonConcentration}" />
</Grid>

Related

How to apply data triggers on image based on entry

I have one entry and a image, as initial load of page i want to show close.png image, after entry is focus or user type anything in entry i want to show searchingicon.png image.
<Entry x:Name="MainSearchPage"/>
<Image Grid.Row="0" Source="close.png" Style="{DynamicResource EntryIcons}" Grid.Column="1" HeightRequest="16" WidthRequest="15" Margin="0,0,0,0" Aspect="AspectFit">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ClearCommand}"/>
</Image.GestureRecognizers>
<Image.Triggers>
<DataTrigger TargetType="Image" Binding="{Binding Source={x:Reference MainSearchPage},Path=Text.Length}" Value="0">
<Setter Property="Source" Value="searchingicon.png" />
</DataTrigger>
</Image.Triggers>
</Image>
You can try to use the following code to do that.
<Image Grid.Row="0" Source="searchingicon.png" Style="{DynamicResource EntryIcons}" Grid.Column="1" HeightRequest="16" WidthRequest="15" Margin="0,0,0,0" Aspect="AspectFit">
<Image.Triggers>
<MultiTrigger TargetType="Image">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding Source={x:Reference MainSearchPage}, Path=IsFocused}" Value="false"/>
<BindingCondition Binding="{Binding Source={x:Reference MainSearchPage}, Path=Text}" Value="{x:Null}"/>
</MultiTrigger.Conditions>
<Setter Property="Source" Value="close.png" />
</MultiTrigger>
<MultiTrigger TargetType="Image">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding Source={x:Reference MainSearchPage}, Path=IsFocused}" Value="false"/>
<BindingCondition Binding="{Binding Source={x:Reference MainSearchPage}, Path=Text.Length}" Value="0"/>
</MultiTrigger.Conditions>
<Setter Property="Source" Value="close.png" />
</MultiTrigger>
</Image.Triggers>
</Image>
You just want to show close.png in two conditions:
The entry is unfocused and the entry's text length is 0, this is what the second <MultiTrigger> does.
The page is initial load (means the entry's text is null) and the entry is unfocused, this is what the first <MultiTrigger> does.

How to set Image Source property by Xaml Behaviors?

I want change background image on every FlipView item.
I'm try this code, but it fired error Only IBehavior types are supported in a BehaviorCollection.
How set image source correctly?
<Grid>
<i:Interaction.Behaviors>
<core:DataTriggerBehavior
Binding="{Binding SelectedIndex, ElementName=TourFlipView}"
ComparisonCondition="Equal"
Value="1" />
<core:ChangePropertyAction
TargetObject="{Binding ElementName=TourFlipViewBackgroundImage}"
PropertyName="Source"
Value="ms-appx:///Assets/Images/2.png" />
</i:Interaction.Behaviors>
<Image
x:Name="TourFlipViewBackgroundImage"
Source="ms-appx:///Assets/Images/1.png" />
<FlipView
x:Name="TourFlipView">
...
<FlipView/>
</Grid>
You did almost correct with small mistake. put your ChangePropertyAction inside DataTriggerBehavior
<i:Interaction.Behaviors>
<core:DataTriggerBehavior
Binding="{Binding SelectedIndex, ElementName=TourFlipView}"
ComparisonCondition="Equal"
Value="1" >
<core:ChangePropertyAction
TargetObject="{Binding ElementName=TourFlipViewBackgroundImage}"
PropertyName="Source"
Value="ms-appx:///Assets/Images/2.png" />
</core:DataTriggerBehavior>
</i:Interaction.Behaviors>

Xaml Change text of TextBlock When Combobox Selection Change

I'm currently facing a problem in one of my Xaml Files. I created a combox with 2 fixed combobox Items. I also created a textblock. Here is the xaml code :
<StackPanel>
<TextBlock Grid.Column="0" x:Name="UserSettingsConnectorGroupBoxProductTextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Strings.UserSettingsConnectorGroupBoxProductText, Source={StaticResource StringLocalizer}}" VerticalAlignment="Center" Margin="10,0,0,0" />
<ComboBox Grid.Column="1" x:Name="UserSettingsConnectorGroupBoxProductComboBox" VerticalAlignment="Center" Width="300" HorizontalAlignment="Left" Margin="10,5,0,0" SelectionChanged="UserSettingsConnectorGroupBoxProductComboBox_SelectionChanged" >
<ComboBoxItem Content="Microsoft Deployment Toolkit" />
<ComboBoxItem Content="Microsoft System Center Configuration Manager" />
</ComboBox>
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Margin="10,0,0,0">
<TextBlock Name="ConnectorTextBlock" Text="toto" Margin="0,5" >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft Deployment Toolkit">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathMDT, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft System Center Configuration Manager">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathSCCM, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<StackPanel Orientation="Horizontal" >
<TextBox Name="ConnectorTextBox" Margin="0,5" Width="300">
</TextBox>
<Button Content="Test" Margin="5" Width="100" HorizontalAlignment="Right"/>
</StackPanel>
<Button Content="Save" Width="100" HorizontalAlignment="Left" Margin="0,5" IsEnabled="False"/>
</StackPanel>
And a preview :
enter image description here
I would like the text of textBlock named "ConnectorTextBox" changes when the combobox Selected Item Changes. In order to do this, i created 2 datatriggers in TextBlock bound to "Text" Property of Combobox Control. Depending on the value of Text property, the Text value of textblock changes.
But it does not function. Only default value "Toto" is diplayed, even if i change my combobox Selection.
Any help would be greatly appreciated :) :)
Regis
Avoid setting Text property of TextBlock. Try this
<TextBlock Name="ConnectorTextBlock" Margin="0,5" >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft Deployment Toolkit">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathMDT, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft System Center Configuration Manager">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathSCCM, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
If you want to set a default value, do it as below
<TextBlock Name="ConnectorTextBlock" Margin="0,5" >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Text" Value="Toto" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft Deployment Toolkit">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathMDT, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=UserSettingsConnectorGroupBoxProductComboBox, Path=Text}" Value="Microsoft System Center Configuration Manager">
<Setter Property="Text" Value="{Binding Strings.UserSettingsConnectorGroupBoxProductTextBlockConnectorPathSCCM, Source={StaticResource StringLocalizer}}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
Hope this helps!!

How to animate a Popup when it hides?

i created a Popup Style for using in my windows 8.1 application. And i applied PopupThemeTransition to it's ChildTransitions Property.
<Style x:Key="AnimatedPopupStyle" TargetType="Popup">
<Setter Property="IsLightDismissEnabled" Value="False"/>
<Setter Property="ChildTransitions">
<Setter.Value>
<TransitionCollection>
<PopupThemeTransition/>
</TransitionCollection>
</Setter.Value>
</Setter>
</Style>
My problem is that it animates when it Opens & not animating when closing. What to do with that for animating the content on hiding ? Do i want to create a Custom Popup control?
NB: I know that PopInThemeAnimation & PopOutThemeAnimation is there . But don't know how to use it on this condition ?
This is not native to the Popup because they typically do not have an exit animation. Having said that, there's no reason you can't add an exit animation to a Popup control.
Try this:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<Storyboard x:Name="ShowPopup">
<PopInThemeAnimation Storyboard.TargetName="MyPopup" />
</Storyboard>
<Storyboard x:Name="HidePopup">
<PopOutThemeAnimation Storyboard.TargetName="MyPopup" />
</Storyboard>
</Grid.Resources>
<Popup x:Name="MyPopup" IsOpen="True"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Popup.Transitions>
<TransitionCollection>
<PopupThemeTransition />
</TransitionCollection>
</Popup.Transitions>
<Grid Height="200" Width="200" Background="Red">
<StackPanel>
<Button Content="Hide (Native)" HorizontalAlignment="Center">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Click">
<Core:ChangePropertyAction
PropertyName="IsOpen"
TargetObject="{Binding ElementName=MyPopup}" />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Button>
<Button Content="Hide (Storyboard)" HorizontalAlignment="Center">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Click">
<Media:ControlStoryboardAction
Storyboard="{StaticResource HidePopup}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Button>
</StackPanel>
</Grid>
</Popup>
<StackPanel>
<Button Content="Show Popup (Native)" HorizontalAlignment="Left" VerticalAlignment="Top">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Click">
<Core:ChangePropertyAction
TargetObject="{Binding ElementName=MyPopup}"
PropertyName="IsOpen" Value="True"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Button>
<Button Content="Show Popup (Storyboard)" HorizontalAlignment="Left" VerticalAlignment="Top">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Click">
<Core:ChangePropertyAction
TargetObject="{Binding ElementName=MyPopup}"
PropertyName="IsOpen" Value="True"/>
<Media:ControlStoryboardAction
Storyboard="{StaticResource ShowPopup}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Button>
</StackPanel>
</Grid>
Using these:
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Media="using:Microsoft.Xaml.Interactions.Media"
Best of luck!

Insert the Name of a BindingSource into a String?

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?