locked
how to set DataTrigger And No Set In Style? RRS feed

  • Question

  • hi,

    this code is error, im set style button and cannot set trigger in Button.Triggers:

     

    <Button x:Name="btnCloseSetting"
     Content="{StaticResource BackTo_Language}"
    Height="23" HorizontalAlignment="Right" Margin="0,0,12,12"
     VerticalAlignment="Bottom" Width="153"
     Style="{StaticResource SettingButtonStyle}" Visibility="Collapsed">
                    <Button.Triggers>
                        <EventTrigger RoutedEvent="Button.Click">
                            <BeginStoryboard Storyboard="{StaticResource ShowSettingStoryboard}"/>
                            <BeginStoryboard Storyboard="{StaticResource CloseSettingStory}"/>
                        </EventTrigger>
                        <DataTrigger Value="True"
     Binding="{Binding Source={StaticResource MainViewModel}, Path=CloseSetting}">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource ShowSettingStoryboard}"/>
                                <BeginStoryboard Storyboard="{StaticResource CloseSettingStory}"/>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                    </Button.Triggers>
                </Button>
    

    Wednesday, October 19, 2011 11:44 AM

Answers

  • As mentioned you cannot set an element using Targetname in a style, its simply not possible.

     

    move the datrigger to the grid style and remove the TargetName property 

    <Grid x:Name="gridConnect" Background="White" FlowDirection="RightToLeft">
    <Grid.Style>
    <Style>
    <Style.Triggers>
     <DataTrigger Binding="{Binding Tag}" Value="1">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
                                                    <EasingDoubleKeyFrame KeyTime="0" Value="1.0" />
                                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                </DataTrigger>
    </Style.Triggers>
    </Style>

     

     

     

    Thursday, October 20, 2011 3:34 PM
  • Hi Hamishe,

    Please see the code snippet below for ur issue. I have made a few modifications and theoutput is what u desire.

    XAML:
    
    
    <Window x:Class="SandBox.Window47"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:y="clr-namespace:System.Windows.Media.Animation;assembly=PresentationCore"
        Title="Window47" Height="300" Width="300">
        <Grid>
            <Grid.Resources>
                <Storyboard x:Key="MystoryBoard">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Opacity)" >
                        <DiscreteDoubleKeyFrame KeyTime="0" Value="1.0"></DiscreteDoubleKeyFrame>
                        <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="0.0"></DiscreteDoubleKeyFrame>
                        <!--<EasingDoubleKeyFrame KeyTime="0" Value="1.0" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0"/>-->
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>
            <Grid x:Name="gridConnect" Background="Blue" FlowDirection="RightToLeft">
                <Grid.Style>
                    <Style TargetType="Grid">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=TagProperty}" Value="1">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource MystoryBoard}">
                                        
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Grid.Style>
                <Button Click="Button_Click" Content="Start StoryBoard" Height="23" Width="200" >
                    
                </Button>
            </Grid>
        </Grid>
    </Window>
    
    
    CodeBehind:
    
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Shapes;
    using System.ComponentModel;
    
    namespace SandBox
    {
        /// <summary>
        /// Interaction logic for Window47.xaml
        /// </summary>
        public partial class Window47 : Window,INotifyPropertyChanged
        {
            object _tag = 0;
    
            public object TagProperty
            {
                get { return _tag; }
                set { _tag = value; OnPropertyChanged("TagProperty"); }
            }
    
            public Window47()
            {
                InitializeComponent();
                this.DataContext = this;
            }
    
            #region INotifyPropertyChanged Members
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            #endregion
    
            protected virtual void OnPropertyChanged(string propertyName)
            {
                if (this.PropertyChanged != null)
                    this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                TagProperty = 1;
            }
        }
    }
    

    Please mark it as an answer if it resolves ur issue.


    Regards, Parth Shah
    • Proposed as answer by parth.shah Thursday, October 20, 2011 4:06 PM
    • Marked as answer by Ali Visual Studio Friday, October 21, 2011 7:35 AM
    Thursday, October 20, 2011 4:06 PM

All replies

  • Hi Hamishe,

    U cannot set DataTrigger in Framework element's trigger collection. Framework element trigger collection only supports EventTrigger. If u want to specify DataTrigger then u should rather move ur datatrigger to the button's style which is "SettingButtonStyle" in ur case.

    Please see the below mentioned hierarchy describing which element supports which triggers.

    FrameworkElement     Style, ControlTemplate, DataTemplate
    ----------------     ------------------------------------
    EventTrigger         EventTrigger
                         Trigger or MultiTrigger
                         DataTrigger or MultiDataTrigger

    Also have a look at below post for further assistance.

    http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/f816fd72-4f41-4a1a-b0a2-4e409e89c75c/

    Please mark it as an answer if it resolves ur query.


    Regards, Parth Shah
    • Proposed as answer by parth.shah Wednesday, October 19, 2011 12:17 PM
    Wednesday, October 19, 2011 12:17 PM
  • Hi,

    I'm assuming you just cant modify the resource SettingButtonStyle?

    Have you considered creating a new style that inherits from the style SettingButtonStyle and then setting the trigger in there?

     

    That should allow you to add the datatrigger to style without overwritting the SettingButtonStyle.

     

    Wednesday, October 19, 2011 12:28 PM
  • hi,

    thank you my friend for replay,

    yes i cannot modify SettingButtonStyle,

    i must set triggers in new style....can i set 2 style in controls?

    how to overwritting the SettingButtonStyle and set property in SettingButtonStyle And new Style?

    Wednesday, October 19, 2011 12:44 PM
  • if Button.Click Event is run or Binding CloseSetting is True this StoryBoard must begin:

     <BeginStoryboard Storyboard="{StaticResource ShowSettingStoryboard}"/>
     <BeginStoryboard Storyboard="{StaticResource CloseSettingStory}"/>
    Wednesday, October 19, 2011 12:50 PM
  • Hi,

     

    To allow one style to inheirt from another you just do this 

     

    <Style x:Key="SettingButtonStyleModified" BasedOn="{StaticResource SettingButtonStyle}">

             <!--extra properties you want to set -->   

            </Style>

     

    Then your button will use the new style (SettingButtonStyleModified) instead of SettingButtonStyle.

    <Button Style="{SettingButtonStyleModified}"

    Hope that helps?

    Wednesday, October 19, 2011 1:23 PM
  • Hi Hamishe,

    What Pritesh told is correct. U can create a new style based upon "SettingButtonStyle" and write ur datatrigger therein.

    This should serve ur purpose.

    HTH


    Regards, Parth Shah
    Wednesday, October 19, 2011 1:35 PM
  • thank you...

    im set BaseOn and is Work...

    but this is error for begin storyBoard:

    TargetName property cannot be set on a Style

    Wednesday, October 19, 2011 2:05 PM
  • Can you post the xaml for your storyboard
    Wednesday, October 19, 2011 2:08 PM
  •  <Button x:Name="btnCloseSetting" Content="{StaticResource BackTo_Language}"
     Height="23" HorizontalAlignment="Right" Margin="0,0,12,12" VerticalAlignment="Bottom"
     Width="153" Visibility="Collapsed"> <Button.Style> <Style BasedOn="{StaticResource SettingButtonStyle}"
     TargetType="{x:Type Button}"> <Style.Triggers> <DataTrigger Value="True"
    Binding="{Binding Source={StaticResource MainViewModel}, Path=CloseSetting}"> <DataTrigger.EnterActions> <BeginStoryboard > <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="btnCloseSetting"
     Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Collapsed}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ctrlSetting"
     Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Collapsed}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InfoControl"
     Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="btnShowSetting"
     Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}" /> </ObjectAnimationUsingKeyFrames> <BooleanAnimationUsingKeyFrames Storyboard.TargetName="btnCloseSetting"
     Storyboard.TargetProperty="IsEnabled"> <DiscreteBooleanKeyFrame KeyTime="0" Value="False" /> </BooleanAnimationUsingKeyFrames> <BooleanAnimationUsingKeyFrames Storyboard.TargetName="ctrlSetting"
    Storyboard.TargetProperty
    ="IsEnabled"> <DiscreteBooleanKeyFrame KeyTime="0" Value="False" /> </BooleanAnimationUsingKeyFrames> <BooleanAnimationUsingKeyFrames Storyboard.TargetName="btnShowSetting"
     Storyboard.TargetProperty="IsEnabled"> <DiscreteBooleanKeyFrame KeyTime="0:0:1" Value="True" /> </BooleanAnimationUsingKeyFrames> <BooleanAnimationUsingKeyFrames Storyboard.TargetName="InfoControl"
     Storyboard.TargetProperty="IsEnabled"> <DiscreteBooleanKeyFrame KeyTime="0:0:1" Value="True" /> </BooleanAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </DataTrigger.EnterActions> </DataTrigger> </Style.Triggers> </Style> </Button.Style> <Button.Triggers> <EventTrigger RoutedEvent="Button.Click"> <BeginStoryboard Storyboard="{StaticResource ShowSettingStoryboard}"/> <BeginStoryboard Storyboard="{StaticResource CloseSettingStory}"/> </EventTrigger> </Button.Triggers> </Button>
    Wednesday, October 19, 2011 2:13 PM
  • I don't thikn you will be able to do it like that. TargetName is usually used in templates etc. I don' t think you will be able to achieve what you want using a trigger (at least I'm not aware of how to)

     

    Why don't you bind the controls visibility to the CloseSettings property and create a converter to return Visible (if CloseSetting = true) or Collapsed (if CloseSetting is false).

    <Button Visibility="{Binding CloseSetting, converter={StaticResource BoolToVisibilityConverter}}" />

    Then for controls that are visible when CloseSetting = true. 

    You create a second converter (that essentially returns Collapsed when CloseSetting=true and Visible when CloseSetting = false.

    <Button Visibility="{Binding CloseSetting, converter={StaticResource BoolToinvertVisibilityConverter}}" />

     

    Does that make sense? I think this way is cleaner than triggers and storyboards all over the window.

     

    Wednesday, October 19, 2011 2:38 PM
  • Hi,

    Please see the code snippet below for ur issue. I have only made a few modification and it works fine.

    <Window x:Class="SandBox.Window47"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window47" Height="300" Width="300">
        <Grid>
            <Grid.Resources>
                <Storyboard x:Key="mystoryboard">
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="btnCloseSetting" Storyboard.TargetProperty="(Button.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="0:0:1"
                                  Value="{x:Static Visibility.Collapsed}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ctrlSetting" Storyboard.TargetProperty="(Button.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="0:0:1"
                                  Value="{x:Static Visibility.Collapsed}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InfoControl" Storyboard.TargetProperty="(Button.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="0:0:1"
                                  Value="{x:Static Visibility.Visible}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="btnShowSetting" Storyboard.TargetProperty="(Button.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="0:0:1"
                                  Value="{x:Static Visibility.Visible}" />
                    </ObjectAnimationUsingKeyFrames>
                    <BooleanAnimationUsingKeyFrames Storyboard.TargetName="btnCloseSetting" Storyboard.TargetProperty="(Button.IsEnabled)">
                        <DiscreteBooleanKeyFrame KeyTime="0" Value="False" />
                    </BooleanAnimationUsingKeyFrames>
                    <BooleanAnimationUsingKeyFrames Storyboard.TargetName="ctrlSetting" Storyboard.TargetProperty="(Button.IsEnabled)">
                        <DiscreteBooleanKeyFrame KeyTime="0" Value="False" />
                    </BooleanAnimationUsingKeyFrames>
                    <BooleanAnimationUsingKeyFrames Storyboard.TargetName="btnShowSetting" Storyboard.TargetProperty="(Button.IsEnabled)">
                        <DiscreteBooleanKeyFrame KeyTime="0:0:1" Value="True" />
                    </BooleanAnimationUsingKeyFrames>
                    <BooleanAnimationUsingKeyFrames Storyboard.TargetName="InfoControl" Storyboard.TargetProperty="(Button.IsEnabled)">
                        <DiscreteBooleanKeyFrame KeyTime="0:0:1" Value="True" />
                    </BooleanAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>
            <!--<Button x:Name="btn" Height="25" Width="150" Content="Button" >
            </Button>-->
            <Button x:Name="btnCloseSetting" Content="{StaticResource BackTo_Language}" Height="23" HorizontalAlignment="Right" Margin="0,0,12,12" VerticalAlignment="Bottom" Width="153" Visibility="Collapsed">
                <Button.Style>
                    <Style BasedOn="{StaticResource SettingButtonStyle}" TargetType="{x:Type Button}">
                        <Style.Triggers>
                            <DataTrigger Value="True" Binding="{Binding Source={StaticResource MainViewModel}, Path=CloseSetting}">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource mystoryboard}">
                                        
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{StaticResource ShowSettingStoryboard}"/>
                        <BeginStoryboard Storyboard="{StaticResource CloseSettingStory}"/>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </Grid>
    </Window>
    

    Please mark it as an answer if it resolves ur issue.


    Regards, Parth Shah
    • Proposed as answer by parth.shah Wednesday, October 19, 2011 4:31 PM
    • Edited by parth.shah Wednesday, October 19, 2011 4:37 PM
    Wednesday, October 19, 2011 4:31 PM
  • hi i'm test this code...and error in INotifyPropertyChanged :

    A Storyboard tree in a Style cannot specify a TargetName. Remove TargetName 'btnCloseSetting'.

    Wednesday, October 19, 2011 6:13 PM
  • Hi Hamishe, 

     

    This error occurs because you cannot set a targetname in a style trigger. It will work in your button.Click event trigger.

    I think you should change this only slightly.

    You should keep your storyboards and use them for the button click event (they should work fine there).

    But you should create 2 additional styles. One to set the visibility of the button to true if closeSetting = false and another style to change set the button visibility to collapsed (if CloseSetting = true).

    This is because in your storyboard when CloseSetting = true some buttons are visible and some are invisible.

    Like this -

    <Style TargetType="Button" x:Key="SettingButtonStyleModified" BasedOn="{StaticResource SettingButtonStyle}">
                <Setter Property="Background" Value="Brown"/>
                <Style.Triggers>
                    <DataTrigger Value="false" Binding="{Binding Path=CloseSetting}">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource mystoryboardTest}">
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
    
            <Style TargetType="Button" x:Key="SettingButtonStyleModifiedOpposite" BasedOn="{StaticResource SettingButtonStyle}">
                <Setter Property="Background" Value="Brown"/>
                <Style.Triggers>
                    <DataTrigger Value="true" Binding="{Binding Path=CloseSetting}">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource mystoryboardTest}">
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
    

    I have used the Based property in the styles becaue I remembered that you cannot modify the original style (SettingButtonStyle) so these new style can derive from it.

     The new styles use a storyboard "mystoryboardTest" (which doesn't use the targetName property) so it can only change the visibility of the  button that uses the style (and gets around the targetName error issue).

     

    The storyboard I created is simply this - 

    <Storyboard x:Key="mystoryboardTest">
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Visibility)">
                    <DiscreteObjectKeyFrame KeyTime="0:0:1"
                                  Value="{x:Static Visibility.Collapsed}" />
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
    


    Now the styles haver to be added to each button 

    like this 

     <Button x:Name="TestButton" Height="100" Style="{StaticResource SettingButtonStyleModifiedOpposite}" Width="300" Content="Should be INVISIBLE when CloseSetting is true" />

    (Makes the button invisible when CloseSetting = true)

    and for the other style (for buttons which should only become invisible when CloseSetting = false) - 

    <Button x:Name="TestButtonTwo"  Style="{StaticResource SettingButtonStyleModified}" Height="100" Width="300" Content="Should be VISIBLE when CloseSetting is true" />

     

    Now as I mentioned I think you should still keep your original storyboards and only use them in the button event trigger (Button.Click)

    like this - 

    <Button x:Name="btnCloseSetting" Style="{StaticResource SettingButtonStyleModifed}" Content="Test" Height="23" HorizontalAlignment="Right" Margin="0,0,12,12" VerticalAlignment="Bottom" Width="153" Visibility="Collapsed">
                
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{StaticResource ShowSettingStoryboard}"/>
                        <BeginStoryboard Storyboard="{StaticResource CloseSettingStory}"/>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
    

     

    I hope that makes sense. Juyst let me know if you have any questions etc. 

     

    Also please ensure that when you create the styles, storyboards etc you declare the storyboards before the styles (otherwise the styles won't find the storyboards).

     

    Good luck! 

     

     

    I think you should create 2 additional storyboards.  

    Thursday, October 20, 2011 9:21 AM
  • Ignore the line -

    I think you should create 2 additional storyboards.  (at the bottom of my last post)

    Thursday, October 20, 2011 9:23 AM
  • Hi Hamishe,

    I have figured out ur issue. Please see the code snippet below for solution.

    <Window x:Class="SandBox.Window47"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window47" Height="300" Width="300">
        <Grid>
            <Grid.Resources>
                <Storyboard x:Key="mystoryboard">
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="0:0:1"
                                  Value="{x:Static Visibility.Collapsed}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="0:0:1"
                                  Value="{x:Static Visibility.Collapsed}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="0:0:1"
                                  Value="{x:Static Visibility.Visible}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="0:0:1"
                                  Value="{x:Static Visibility.Visible}" />
                    </ObjectAnimationUsingKeyFrames>
                    <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.IsEnabled)">
                        <DiscreteBooleanKeyFrame KeyTime="0" Value="False" />
                    </BooleanAnimationUsingKeyFrames>
                    <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.IsEnabled)">
                        <DiscreteBooleanKeyFrame KeyTime="0" Value="False" />
                    </BooleanAnimationUsingKeyFrames>
                    <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.IsEnabled)">
                        <DiscreteBooleanKeyFrame KeyTime="0:0:1" Value="True" />
                    </BooleanAnimationUsingKeyFrames>
                    <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.IsEnabled)">
                        <DiscreteBooleanKeyFrame KeyTime="0:0:1" Value="True" />
                    </BooleanAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>
            <!--<Button x:Name="btn" Height="25" Width="150" Content="Button" >
            </Button>-->
            <Button x:Name="btnCloseSetting" Content="{StaticResource BackTo_Language}" Height="23" HorizontalAlignment="Right" Margin="0,0,12,12" VerticalAlignment="Bottom" Width="153" Visibility="Collapsed">
                <Button.Style>
                    <Style BasedOn="{StaticResource SettingButtonStyle}" TargetType="{x:Type Button}">
                        <Style.Triggers>
                            <DataTrigger Value="True" Binding="{Binding Source={StaticResource MainViewModel}, Path=CloseSetting}">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource mystoryboard}">
                                        
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{StaticResource ShowSettingStoryboard}"/>
                        <BeginStoryboard Storyboard="{StaticResource CloseSettingStory}"/>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </Grid>
    </Window>
    

    U need not to specify the Target name property since ur using this storyboard in the style property of a particular framework element which in ur case is btnCloseSetting.

    Hence its giving error. Above code works fine without error. HTH.

    Please mark it as an answer if it resolves ur issue


    Regards, Parth Shah
    Thursday, October 20, 2011 10:50 AM
  • Hi Parth,

     

    What you've done won't work because he wants to target a group of buttons and set their visibility to false in 1 storyboard. 

    which is not possible because targetname cannot be set in a style.

    Which is why I recommended creating 2 new styles +  storyboards for the buttons (1 for visibile and 1 for visibility.collapsed) . 

     

     

    Thursday, October 20, 2011 10:55 AM
  • Hi Hamishe,

    Please see below the working example for group of buttons.

    XAML:
    
    <Window x:Class="SandBox.Window47"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window47" Height="300" Width="300">
        <Grid>
            <Grid.Resources>
                <Storyboard x:Key="CloseSetting">
                    <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="(Button.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="0:0:1"
                                  Value="{x:Static Visibility.Collapsed}" />
                    </ObjectAnimationUsingKeyFrames>
                    <BooleanAnimationUsingKeyFrames  Storyboard.TargetProperty="(Button.IsEnabled)">
                        <DiscreteBooleanKeyFrame KeyTime="0" Value="False" />
                    </BooleanAnimationUsingKeyFrames>
                </Storyboard>
                <Storyboard x:Key="ShowSetting">
                    <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="(Button.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="0:0:1"
                                  Value="{x:Static Visibility.Visible}" />
                    </ObjectAnimationUsingKeyFrames>
                    <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.IsEnabled)">
                        <DiscreteBooleanKeyFrame KeyTime="0:0:1" Value="True" />
                    </BooleanAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>
            <!--<Button x:Name="btn" Height="25" Width="150" Content="Button" >
            </Button>-->
            <Button x:Name="btnCloseSetting" Content="Close Setting" Height="23" HorizontalAlignment="Right" Margin="0,100,0,0" Width="153" Visibility="Visible">
                <Button.Style>
                    <Style TargetType="{x:Type Button}">
                        <Style.Triggers>
                            <DataTrigger Value="True" Binding="{Binding Path=ABC}">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource CloseSetting}">
                                        
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
                <!--<Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{StaticResource ShowSettingStoryboard}"/>
                        <BeginStoryboard Storyboard="{StaticResource CloseSettingStory}"/>
                    </EventTrigger>
                </Button.Triggers>-->
            </Button>
            <Button x:Name="btnShowSetting" Content="Show Setting" Height="23" HorizontalAlignment="Right" Margin="0,200,0,0" Width="153" Visibility="Collapsed">
                <Button.Style>
                    <Style TargetType="{x:Type Button}">
                        <Style.Triggers>
                            <DataTrigger Value="True" Binding="{Binding Path=ABC}">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource ShowSetting}">
    
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
                <!--<Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{StaticResource ShowSettingStoryboard}"/>
                        <BeginStoryboard Storyboard="{StaticResource CloseSettingStory}"/>
                    </EventTrigger>
                </Button.Triggers>-->
            </Button>
            <CheckBox x:Name="chk" Click="chk_Click" Margin="0" Content="Start StoryBoard" VerticalAlignment="Top" Height="20" Width="150"></CheckBox>
        </Grid>
    </Window>
    
    
    CodeBehind:
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Shapes;
    using System.IO;
    using System.ComponentModel;
    
    namespace SandBox
    {
        /// <summary>
        /// Interaction logic for Window47.xaml
        /// </summary>
        public partial class Window47 : Window, INotifyPropertyChanged
        {
            public bool ABC { get; set; }
            public Window47()
            {
                InitializeComponent();
                this.DataContext = this;
            }
    
            private void chk_Click(object sender, RoutedEventArgs e)
            {
                ABC = chk.IsChecked.Value;
                this.OnPropertyChanged("ABC");
            }
    
            #region INotifyPropertyChanged Members
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            protected virtual void OnPropertyChanged(string propertyName)
            {
                if (this.PropertyChanged != null)
                    this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
    
            #endregion
        }
    }
    


    HTH.

    @Pritesh: I think what u told is correct. Please see attahced example. Correct me if I am wrong.


    Regards, Parth Shah
    • Edited by parth.shah Thursday, October 20, 2011 11:21 AM
    Thursday, October 20, 2011 11:21 AM
  • Hi Parth,

     

    From the looks of it your example will work but the problem (in this case) is that he can't set the style on the button because it makes use of a style already (which he can't modify). This is why I create the style that uses BasedOn so he could put the trigger in there.

     

     

    Thursday, October 20, 2011 2:00 PM
  • Hi Pritesh,

    I haven't made use of BasedOn property because I didn't have that style from which I inherit the value. U can always use BasedOn property.


    Regards, Parth Shah
    Thursday, October 20, 2011 3:14 PM
  • hi,

    thanks all for replayes..

    my code is high..

    this code is not work!!!

    i want to Chenged Tag in MVVM Play the StoryBoard in Xaml:

    this code is error to set targetName.

    please test this code:

    my mvvm Tag is:

     

            object _tag = 0;
    
            public object Tag
            {
                get { return _tag; }
                set { _tag = value; OnPropertyChanged("Tag"); }
            }
    
    <Grid>
            <Grid Background="White">
                <DataGrid AutoGenerateColumns="False" Margin="12,12,12,87" Name="dataGrid1">
    
                </DataGrid>
                <Grid FlowDirection="RightToLeft" Height="69" Margin="12,0,12,12" Name="grid1" VerticalAlignment="Bottom">
                    <Button Content="get" Height="23" HorizontalAlignment="Left" Margin="6,6,0,0" Name="button1" VerticalAlignment="Top" Width="154" />
                </Grid>
            </Grid>
            <Grid x:Name="gridConnect" Background="White" FlowDirection="RightToLeft">
                <Button Command="{Binding ConnectCommand}" Content="{Binding Content}" Tag="{Binding Tag}" Height="23" Width="200" >
                    <Button.Style>
                        <Style TargetType="Button">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Tag}" Value="1">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="gridConnect">
                                                    <EasingDoubleKeyFrame KeyTime="0" Value="1.0" />
                                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>
            </Grid>
        </Grid> 
    Thursday, October 20, 2011 3:24 PM
  • As mentioned you cannot set an element using Targetname in a style, its simply not possible.

     

    move the datrigger to the grid style and remove the TargetName property 

    <Grid x:Name="gridConnect" Background="White" FlowDirection="RightToLeft">
    <Grid.Style>
    <Style>
    <Style.Triggers>
     <DataTrigger Binding="{Binding Tag}" Value="1">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
                                                    <EasingDoubleKeyFrame KeyTime="0" Value="1.0" />
                                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                </DataTrigger>
    </Style.Triggers>
    </Style>

     

     

     

    Thursday, October 20, 2011 3:34 PM
  • add on a final </grid> (to my example)
    Thursday, October 20, 2011 3:35 PM
  • thank you it's Worked....

    DataTrigger must be set to Animation Control and not set targetName...

    Thursday, October 20, 2011 3:47 PM
  • Hi Hamishe,

    Please see the code snippet below for ur issue. I have made a few modifications and theoutput is what u desire.

    XAML:
    
    
    <Window x:Class="SandBox.Window47"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:y="clr-namespace:System.Windows.Media.Animation;assembly=PresentationCore"
        Title="Window47" Height="300" Width="300">
        <Grid>
            <Grid.Resources>
                <Storyboard x:Key="MystoryBoard">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Opacity)" >
                        <DiscreteDoubleKeyFrame KeyTime="0" Value="1.0"></DiscreteDoubleKeyFrame>
                        <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="0.0"></DiscreteDoubleKeyFrame>
                        <!--<EasingDoubleKeyFrame KeyTime="0" Value="1.0" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0"/>-->
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>
            <Grid x:Name="gridConnect" Background="Blue" FlowDirection="RightToLeft">
                <Grid.Style>
                    <Style TargetType="Grid">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=TagProperty}" Value="1">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource MystoryBoard}">
                                        
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Grid.Style>
                <Button Click="Button_Click" Content="Start StoryBoard" Height="23" Width="200" >
                    
                </Button>
            </Grid>
        </Grid>
    </Window>
    
    
    CodeBehind:
    
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Shapes;
    using System.ComponentModel;
    
    namespace SandBox
    {
        /// <summary>
        /// Interaction logic for Window47.xaml
        /// </summary>
        public partial class Window47 : Window,INotifyPropertyChanged
        {
            object _tag = 0;
    
            public object TagProperty
            {
                get { return _tag; }
                set { _tag = value; OnPropertyChanged("TagProperty"); }
            }
    
            public Window47()
            {
                InitializeComponent();
                this.DataContext = this;
            }
    
            #region INotifyPropertyChanged Members
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            #endregion
    
            protected virtual void OnPropertyChanged(string propertyName)
            {
                if (this.PropertyChanged != null)
                    this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                TagProperty = 1;
            }
        }
    }
    

    Please mark it as an answer if it resolves ur issue.


    Regards, Parth Shah
    • Proposed as answer by parth.shah Thursday, October 20, 2011 4:06 PM
    • Marked as answer by Ali Visual Studio Friday, October 21, 2011 7:35 AM
    Thursday, October 20, 2011 4:06 PM
  • thank you my friend this codes is worked....
    Friday, October 21, 2011 7:38 AM