Click here to Skip to main content
15,886,137 members
Search within:


Articles / Desktop Programming / XAML
 

Silverlight Experimental Hacks (SLEX) - EventTrigger, PropertyTrigger, ReactiveTrigger, InvokeMethodAction, StoryBoardAction, etc. for Silverlight

Rate me:
Please Sign up or sign in to vote.
4.81/5 (8 votes)
14 Jan 2010CPOL6 min read 40.8K   241   24  
A set of Silverlight Experimental Hacks (1) A custom implementation of EventTrigger and PropertyTrigger (2) Invoking methods in your view model in MVVM (3) Conditionally invoking triggers and behaviors (4) ReactiveTrigger for exporting your custom events
 
<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation">

  <!-- ******MAIN PAGE STYLES****** -->
  <!-- **************************** -->
  <!-- Primary Color Brushes -->
  <SolidColorBrush x:Key="NavigationBackgroundColorBrush" Color="#FF484848"/>
  <SolidColorBrush x:Key="NavigationForegroundColorBrush" Color="#FFFFFFFF"/>
  <SolidColorBrush x:Key="HighLightColorBrush" Color="#FF0097FC"/>
  <SolidColorBrush x:Key="HoverHyperlinkForegroundColorBrush" Color="#FFEBF7FF"/>
  <SolidColorBrush x:Key="HoverHyperLinkBackgroundColorBrush" Color="#FF747474"/>
  <SolidColorBrush x:Key="BodyTextColorBrush" Color="#FF313131"/>

  <!-- LayoutRoot Grid Style -->
  <Style x:Key="LayoutRootGridStyle" TargetType="Grid">
    <Setter Property="Background" Value="#FFFFFFFF"/>
  </Style>

  <!-- Content Border Style -->
  <Style x:Key="ContentBorderStyle" TargetType="Border">
    <Setter Property="Background">
      <Setter.Value>
        <LinearGradientBrush EndPoint="0.5,0.045" StartPoint="0.5,0">
          <GradientStop Color="#6FCCCCCC"/>
          <GradientStop Color="#00CCCCCC" Offset="1"/>
        </LinearGradientBrush>
      </Setter.Value>
    </Setter>
    <Setter Property="BorderBrush" Value="#FFFFFFFF"/>
    <Setter Property="BorderThickness" Value="0,3,0,0"/>
    <Setter Property="Margin" Value="0,42,0,0"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
  </Style>

  <!-- Content Frame Style -->
  <Style x:Key="ContentFrameStyle" TargetType="navigation:Frame">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Padding" Value="58,15,58,15"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
  </Style>

  <!-- Navigation Grid Style -->
  <Style x:Key="NavigationGridStyle" TargetType="Grid">
    <Setter Property="Background" Value="{StaticResource NavigationBackgroundColorBrush}"/>
    <Setter Property="Height" Value="42"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
  </Style>

  <!-- Branding Border Style -->
  <Style x:Key="BrandingBorderStyle" TargetType="Border">
    <Setter Property="Height" Value="42"/>
    <Setter Property="Margin" Value="25,0,25,0"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
  </Style>

  <!-- Branding StackPanel Style -->
  <Style x:Key="BrandingStackPanelStyle" TargetType="StackPanel">
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="Orientation" Value="Horizontal"/>
  </Style>

  <!-- Logo Path Style -->
  <Style x:Key="LogoIcon" TargetType="ContentControl">
    <Setter Property="Height" Value="24"/>
    <Setter Property="Width" Value="24"/>
    <Setter Property="Margin" Value="0,1,10,0"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ContentControl">
          <Grid>
            <Path UseLayoutRounding='False' Fill="{StaticResource HighLightColorBrush}" Stretch="Fill" Data="M8,0 C12.417931,2.8898596E-06 16,3.5814998 16,8 C16,12.417819 12.41803,16 8,16 C3.5816212,16 6.1398991E-06,12.417912 0,8 C1.5351338E-06,6.8954077 0.22386749,5.8431153 0.62867981,4.8860393 C0.65398115,4.82622 0.6799894,4.7667723 0.70669389,4.7077074 L0.73170543,4.6541386 L5.6357112,9.5581446 L3.7429986,11.450858 L3.7429986,11.493001 L11.669835,11.493001 L11.669835,3.5661643 L11.627691,3.5661643 L9.7349787,5.4588776 L4.8993444,0.62324351 L5.0666013,0.55490673 C5.5510159,0.36389247 6.0585575,0.21878535 6.5838675,0.12495131 C6.8465204,0.078035071 7.1136146,0.043936942 7.3844767,0.023327276 C7.5199089,0.013022465 7.6562829,0.0060896641 7.7935166,0.0026129775 C7.862133,0.00087448902 7.9309645,4.5157563E-08 8,0 z"/>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- ApplicationName Style -->
  <Style x:Key="ApplicationNameStyle" TargetType="TextBlock">
    <Setter Property="Foreground" Value="{StaticResource NavigationForegroundColorBrush}"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Margin" Value="0,2,0,0"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="Effect">
      <Setter.Value>
        <DropShadowEffect BlurRadius="10" Opacity="0.25" ShadowDepth="0"/>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Links Border Style -->
  <Style x:Key="LinksBorderStyle" TargetType="Border">
    <Setter Property="Height" Value="42"/>
    <Setter Property="Margin" Value="25,0,25,0"/>
    <Setter Property="HorizontalAlignment" Value="Right"/>
  </Style>

  <!-- Links StackPanel Style -->
  <Style x:Key="LinksStackPanelStyle" TargetType="StackPanel">
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="Orientation" Value="Horizontal"/>
  </Style>

  <!-- Link Style -->
  <Style x:Key="LinkStyle" TargetType="HyperlinkButton">
    <Setter Property="Background" Value="{StaticResource HighLightColorBrush}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="#FF9D9492"/>
    <Setter Property="Foreground" Value="{StaticResource NavigationForegroundColorBrush}"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="MinHeight" Value="28"/>
    <Setter Property="MinWidth" Value="78"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="8,4,8,4"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="HyperlinkButton">
          <Grid x:Name="ButtonGrid" Cursor="{TemplateBinding Cursor}">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
                      <DiscreteObjectKeyFrame KeyTime="00:00:00">
                        <DiscreteObjectKeyFrame.Value>
                          <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.95"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="10"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
                      <DiscreteObjectKeyFrame KeyTime="00:00:00">
                        <DiscreteObjectKeyFrame.Value>
                          <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.8"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="5"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.5"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="Visibility">
                      <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                          <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
                      <DiscreteObjectKeyFrame KeyTime="00:00:00">
                        <DiscreteObjectKeyFrame.Value>
                          <HorizontalAlignment>Center</HorizontalAlignment>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)">
                      <DiscreteObjectKeyFrame KeyTime="00:00:00">
                        <DiscreteObjectKeyFrame.Value>
                          <VerticalAlignment>Center</VerticalAlignment>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
                      <DiscreteObjectKeyFrame KeyTime="00:00:00">
                        <DiscreteObjectKeyFrame.Value>
                          <HorizontalAlignment>Center</HorizontalAlignment>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)">
                      <DiscreteObjectKeyFrame KeyTime="00:00:00">
                        <DiscreteObjectKeyFrame.Value>
                          <VerticalAlignment>Center</VerticalAlignment>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.5"/>
                    </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup x:Name="LinkStates">
                <VisualState x:Name="ActiveLink">
                  <Storyboard>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ActiveBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="InactiveLink"/>
              </VisualStateGroup>
              <VisualStateGroup x:Name="FocusStates">
                <VisualState x:Name="Focused">
                  <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
                      <SplineDoubleKeyFrame KeyTime="0" Value="0.35"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(Rectangle.RadiusX)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(Rectangle.RadiusY)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Unfocused"/>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Rectangle x:Name="FocusVisualElement" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" Opacity="0" Margin="-1" RadiusX="1" RadiusY="1"/>
            <Border x:Name="ActiveBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="0"/>
            <Border x:Name="ContentBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Opacity="1">
              <ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Opacity="1">
                <ContentPresenter.Effect>
                  <DropShadowEffect ShadowDepth="0" Color="#FF484848" Opacity="0.65" BlurRadius="0"/>
                </ContentPresenter.Effect>
              </ContentPresenter>
            </Border>
            <Border x:Name="InteractiveBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Background="{StaticResource HoverHyperLinkBackgroundColorBrush}" BorderThickness="1,1,1,1" Opacity="0" BorderBrush="{StaticResource HoverHyperLinkBackgroundColorBrush}" CornerRadius="1,1,1,1"/>
            <Border x:Name="InteractiveElementBorder" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed">
              <TextBlock x:Name="InteractiveElement" Foreground="{StaticResource HoverHyperlinkForegroundColorBrush}" FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}"/>
            </Border>
            <TextBlock x:Name="DisabledOverlay" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}" Foreground="#FFAAAAAA" Visibility="Collapsed"/>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Divider Style -->
  <Style x:Key="DividerStyle" TargetType="Rectangle">
    <Setter Property="Fill" Value="#1FFFFFFF"/>
    <Setter Property="Stroke" Value="Transparent"/>
    <Setter Property="Width" Value="1"/>
    <Setter Property="Margin" Value="2,4,2,4"/>
  </Style>

  <!-- ******CONTENT PAGE STYLES****** -->
  <!-- ******************************* -->
  <!-- Page Style -->
  <Style x:Key="PageStyle" TargetType="navigation:Page"/>

  <!-- Page ScrollViewer Style -->
  <Style x:Key="PageScrollViewerStyle" TargetType="ScrollViewer">
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0,1,0,1"/>
    <Setter Property="Margin" Value="-58,-15,-58,-15"/>
    <Setter Property="Padding" Value="58,0,58,0"/>
    <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
  </Style>

  <!-- Content Panel Style -->
  <Style x:Key="ContentPanelStyle" TargetType="StackPanel"/>

  <!-- Header Text Style -->
  <Style x:Key="HeaderTextStyle" TargetType="TextBlock">
    <Setter Property="Foreground" Value="{StaticResource BodyTextColorBrush}"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="Margin" Value="0,15,0,4"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
  </Style>

  <!-- Content Text Style -->
  <Style x:Key="ContentTextStyle" TargetType="TextBlock">
    <Setter Property="Foreground" Value="{StaticResource BodyTextColorBrush}"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="Margin" Value="0,2,0,2"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
  </Style>

  <!-- Page HyperlinkButton Style -->
  <Style x:Key="PageHyperlinkButtonStyle" TargetType="HyperlinkButton">
    <Setter Property="TargetName" Value="_new"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
  </Style>

</ResourceDictionary>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Anoop Pillai
Architect
India India
Architect, Developer, Speaker | Wannabe GUT inventor & Data Scientist | Microsoft MVP in C#

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 3 Jan 2010

Article Copyright 2010 by Anoop Pillai
Everything else Copyright © CodeProject, 1999-2024

Web04 2.8:2024-04-02:1