sdk/samples/WPFSamples/SamplesGallery/csharp/samps/opacityanimation_samp.xaml

   1 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   2       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   3       Title="Opacity Animation"
   4       x:Class="OpacityAnimation.Page1"
   5       Loaded="checkLang">
   6
   7 <TabControl MinHeight="500" MaxHeight="700" MinWidth="400">
   8         <TabItem Style="{StaticResource TabStyle}" Header="Opacity Animation Sample" IsSelected="true">
   9           <StackPanel>
  10             <TextBlock Style="{StaticResource HeaderStyle}">Opacity Animation Sample</TextBlock>
  11
  12             <TextBlock Style="{StaticResource mainContentStyle}">This example demonstrates animation of the opacity property.</TextBlock>
  13
  14           </StackPanel>
  15         </TabItem>
  16
  17         <TabItem Name="xaml" Style="{StaticResource TabStyle}" Header="XAML">
  18 <ScrollViewer HorizontalScrollBarVisibility="Visible">
  19           <TextBlock Name="xamlCheck">
  20           <TextBox Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve"><![CDATA[
  21 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  22   WindowTitle="Opacity Animation Example">
  23   <StackPanel Margin="20,0,0,0" Background="{StaticResource myGridBrushResource}">
  24
  25
  26     <TextBlock Margin="0,30,0,0" FontWeight="Bold">Animating the Opacity of Elements</TextBlock>
  27     <TextBlock Margin="0,10,0,0">A Button</TextBlock>
  28
  29     <!-- The opacity property of this Button element is animated. -->
  30
  31     <Button Name="opacityAnimatedButton"
  32       HorizontalAlignment="Left" VerticalAlignment="Top">
  33       A Button
  34     </Button>
  35
  36     <TextBlock Margin="0,10,0,0">An Image</TextBlock>
  37
  38     <!-- The opacity property of this Image element is animated. -->
  39
  40     <Image Name="opacityAnimatedImage"
  41       Source="sampleImages\berries.jpg" Stretch="None"
  42       HorizontalAlignment="Left" VerticalAlignment="Top" />
  43
  44     <TextBlock Margin="0,30,0,0" FontWeight="Bold">Animating the Opacity of a Brush</TextBlock>
  45
  46     <!-- The opacity of the brush used to fill this Button element
  47          is animated. -->
  48
  49     <Button Name="opacityAnimatedBrushButton" Background="Orange"
  50       HorizontalAlignment="Left" VerticalAlignment="Top">
  51       A Button
  52     </Button>
  53
  54
  55     <TextBlock Margin="0,30,0,0" FontWeight="Bold"> Animating the Opacity of a Color within a Brush</TextBlock>
  56
  57     <!-- The opacity of one of the colors that comprise the gradient
  58          used to fill this Rectangle element is animated. -->
  59
  60     <Rectangle Name="opacityAnimatedColorRectangle"
  61       Width="120" Height="50"  Stroke="Black" StrokeThickness="1"
  62       HorizontalAlignment="Left" VerticalAlignment="Top">
  63       <Rectangle.Fill>
  64         <LinearGradientBrush>
  65            <LinearGradientBrush.GradientStops>
  66              <GradientStop Offset="0.0" Color="MediumBlue" />
  67              <GradientStop Offset="0.75" Color="BlueViolet" />
  68            </LinearGradientBrush.GradientStops>
  69         </LinearGradientBrush>
  70       </Rectangle.Fill>
  71     </Rectangle>
  72
  73
  74   </StackPanel>
  75   <Page.Triggers>
  76     <EventTrigger RoutedEvent="Page.Loaded">
  77       <BeginStoryboard Name="myBeginStoryboard">
  78         <Storyboard Name="myStoryboard">
  79           <DoubleAnimation Storyboard.TargetName="opacityAnimatedButton"
  80             Storyboard.TargetProperty="(Button.Opacity)" From="1" To="0"
  81             Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
  82           <DoubleAnimation Storyboard.TargetName="opacityAnimatedImage"
  83             Storyboard.TargetProperty="(Image.Opacity)" From="1" To="0"
  84             Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
  85           <DoubleAnimation Storyboard.TargetName="opacityAnimatedBrushButton"
  86             Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Opacity)" From="1" To="0"
  87             Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
  88           <DoubleAnimation Storyboard.TargetName="opacityAnimatedBrushButton"
  89             Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Opacity)" From="1" To="0"
  90             Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
  91           <ColorAnimation  Storyboard.TargetName="opacityAnimatedColorRectangle"
  92             Storyboard.TargetProperty="(Rectangle.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
  93             Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever">
  94             <ColorAnimation.By>
  95              <Color ScA="-1.0" ScR="0.0" ScG="0.0" ScB="0.0" />
  96             </ColorAnimation.By>
  97           </ColorAnimation>
  98         </Storyboard>
  99       </BeginStoryboard>
 100     </EventTrigger>
 101   </Page.Triggers>
 102 </Page>]]>
 103                       </TextBox>
 104           </TextBlock>
 105 </ScrollViewer>
 106         </TabItem>
 107         <TabItem Name="xamlcsharp" Style="{StaticResource TabStyle}" Header="XAML + C#">
 108           <TabControl TabStripPlacement="Right">
 109             <TabItem Name="xcsharpCheck" Style="{StaticResource TabStyle2}" Header="XAML">
 110
 111             </TabItem>
 112             <TabItem Style="{StaticResource TabStyle2}" Header="C#">
 113             </TabItem>
 114           </TabControl>
 115         </TabItem>
 116
 117         <TabItem Name="xamlvb" Style="{StaticResource TabStyle}" Header="XAML + Visual Basic.NET">
 118           <TabControl TabStripPlacement="Right">
 119             <TabItem Name="xvbCheck" Style="{StaticResource TabStyle2}" Header="XAML">
 120             </TabItem>
 121             <TabItem Style="{StaticResource TabStyle2}" Header="VB.NET">
 122             </TabItem>
 123           </TabControl>
 124         </TabItem>
 125
 126         <TabItem Name="csharp" Style="{StaticResource TabStyle}" Header="C#"></TabItem>
 127
 128         <TabItem Name="vb" Style="{StaticResource TabStyle}" Header="Visual Basic.NET"></TabItem>
 129
 130         <TabItem Name="managedcpp" Style="{StaticResource TabStyle}" Header="Managed C++"></TabItem>
 131
 132         <TabItem Style="{StaticResource TabStyle}" Header="Preview Sample">
 133
 134 <!-- OpacityAnimationExample.xaml
 135      This example shows how to animate the opacity of objects, making them fade in and
 136      out of view. -->
 137 <Canvas Height="600">
 138     <Canvas.Resources>
 139
 140     <DrawingBrush x:Key="myGridBrushResource" Viewport="0,0,10,10"
 141       ViewportUnits="Absolute" TileMode="Tile">
 142       <DrawingBrush.Drawing>
 143         <DrawingGroup>
 144           <DrawingGroup.Children>
 145             <GeometryDrawing Brush="White">
 146               <GeometryDrawing.Geometry>
 147                 <RectangleGeometry Rect="0 0 1 1"/>
 148               </GeometryDrawing.Geometry>
 149             </GeometryDrawing>
 150             <GeometryDrawing Brush="#66CCCCCC">
 151               <GeometryDrawing.Geometry>
 152                 <GeometryGroup>
 153                   <RectangleGeometry Rect="0 0 0.5 0.5" />
 154                   <RectangleGeometry Rect="0.5 0.5 0.5 0.5"/>
 155                 </GeometryGroup>
 156               </GeometryDrawing.Geometry>
 157             </GeometryDrawing>
 158             </DrawingGroup.Children>
 159         </DrawingGroup>
 160       </DrawingBrush.Drawing>
 161     </DrawingBrush>
 162 </Canvas.Resources>
 163
 164   <StackPanel Margin="20" Background="{StaticResource myGridBrushResource}">
 165
 166     <TextBlock Margin="0,30,0,0" FontWeight="Bold">Animating the Opacity of Elements</TextBlock>
 167     <TextBlock Margin="0,10,0,0">A Button</TextBlock>
 168
 169     <!-- The opacity property of this Button element is animated. -->
 170     <Button Name="opacityAnimatedButton"
 171       HorizontalAlignment="Left" VerticalAlignment="Top">
 172       A Button
 173     </Button>
 174
 175     <TextBlock Margin="0,10,0,0">An Image</TextBlock>
 176
 177     <!-- The opacity property of this Image element is animated. -->
 178             <Image HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="None" Name="opacityAnimatedImage"><Image.Source><BitmapImage UriSource="\images\berries.jpg"/></Image.Source></Image>
 179
 180     <TextBlock Margin="0,30,0,0" FontWeight="Bold">Animating the Opacity of a Brush</TextBlock>
 181
 182     <!-- The opacity of the brush used to fill this Button element
 183          is animated. -->
 184     <Button Name="opacityAnimatedBrushButton" Background="Orange"
 185       HorizontalAlignment="Left" VerticalAlignment="Top">
 186       A Button
 187     </Button>
 188
 189         <TextBlock Margin="0,30,0,0" FontWeight="Bold">Animating the Opacity of a Color within a Brush</TextBlock>
 190     <!-- The opacity of one of the colors that comprise the gradient
 191          used to fill this Rectangle element is animated. -->
 192     <Rectangle Name="opacityAnimatedColorRectangle"
 193       Width="120" Height="50"  Stroke="Black" StrokeThickness="1"
 194       HorizontalAlignment="Left" VerticalAlignment="Top">
 195       <Rectangle.Fill>
 196         <LinearGradientBrush>
 197            <LinearGradientBrush.GradientStops>
 198              <GradientStop Offset="0.0" Color="MediumBlue" />
 199              <GradientStop Offset="0.75" Color="BlueViolet" />
 200            </LinearGradientBrush.GradientStops>
 201         </LinearGradientBrush>
 202       </Rectangle.Fill>
 203     </Rectangle>
 204
 205     <StackPanel.Triggers>
 206       <EventTrigger RoutedEvent="StackPanel.Loaded">
 207         <BeginStoryboard>
 208           <Storyboard>
 209       <!-- Animates the Opacity property of a rectangle from 1 to 0 over 5 seconds. -->
 210         <DoubleAnimation Storyboard.TargetName="opacityAnimatedButton"
 211         Storyboard.TargetProperty="(Button.Opacity)"
 212         From="1" To="0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
 213
 214
 215       <!-- Animates the Opacity property of an image from 1 to 0 over 5 seconds. -->
 216         <DoubleAnimation Storyboard.TargetName="opacityAnimatedImage"
 217         Storyboard.TargetProperty="(Image.Opacity)"
 218         From="1" To="0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
 219
 220       <!-- Animates the Opacity property of a brush used to fill a rectangle from 1 to 0 over 5 seconds. -->
 221         <DoubleAnimation Storyboard.TargetName="opacityAnimatedBrushButton"
 222         Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Opacity)"
 223         From="1" To="0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
 224
 225
 226       <!-- Animates the opacity of a color within a LinearGradientBrush.  -->
 227         <ColorAnimation Storyboard.TargetName="opacityAnimatedColorRectangle"
 228         Storyboard.TargetProperty="(Rectangle.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
 229           Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever">
 230           <ColorAnimation.By>
 231             <Color ScA="-1.0" ScR="0.0" ScG="0.0" ScB="0.0" />
 232           </ColorAnimation.By>
 233         </ColorAnimation>
 234           </Storyboard>
 235         </BeginStoryboard>
 236       </EventTrigger>
 237     </StackPanel.Triggers>
 238
 239   </StackPanel>
 240
 241 <!--storyboards moved to root-->
 242 </Canvas>
 243
 244         </TabItem>
 245       </TabControl>
 246 </Page>