Share via

Another Mix08 sample

  • Article

I've posted the first sample I showed in my Mix08 session. The gratuitous use if video and animations is designed to show how well Silverlight 1.0 features (media and animations) work with the Silverlight 2 control model. In this sample, I show a rotating TextBox using separate VideoBrushes for both the foreground text and the background. Here’s what it looks like:

Mix08 Part1 Sample

This is a fully declarative sample. The XAML for this sample is shown below:

<UserControl x:Class="Mix08.Page" xmlns="https://schemas.microsoft.com/client/2007" xmlns:x=https://schemas.microsoft.com/winfx/2006/xaml

    MinWidth="800" MinHeight="600">

  <Grid x:Name="LayoutRoot">

    <!-- Set Background -->

    <Grid.Background>

      <LinearGradientBrush StartPoint="0.547587,0.322135" EndPoint="0.547587,0.992095">

        <LinearGradientBrush.GradientStops>

          <GradientStop Color="#FFDCEAF8" Offset="0"/>

          <GradientStop Color="#00FFFFFF" Offset="1"/>

        </LinearGradientBrush.GradientStops>

      </LinearGradientBrush>

    </Grid.Background>

    <!-- Center a StackPanel -->

    <StackPanel Margin="4" HorizontalAlignment="Center" Orientation="Horizontal">

 

      <!-- Add a multi-line textbox (set AcceptsReturn to true) -->

      <TextBox x:Name="tb" FontSize="60" Width="600" Height="400" AcceptsReturn="True">

 

<!-- Rotate the text box. Have the rotation start when the page loads (via Canvas.Loaded trigger) -->

         <TextBox.Triggers>

          <EventTrigger RoutedEvent="Canvas.Loaded">

            <EventTrigger.Actions>

              <BeginStoryboard>

                <Storyboard x:Name="spin" BeginTime="0" RepeatBehavior="Forever">

   <DoubleAnimation Storyboard.TargetName="rot" Storyboard.TargetProperty="Angle" To="360" Duration="0:0:30"/>

                </Storyboard>

              </BeginStoryboard>

            </EventTrigger.Actions>

          </EventTrigger>

        </TextBox.Triggers>

 

 

         <!-- Add a rotation transform (this is animated above using the "spin" storyboard -->

 

        <TextBox.RenderTransform>

          <RotateTransform x:Name="rot" Angle="0" CenterX="300" CenterY="200"/>

        </TextBox.RenderTransform>

 

<!-- Set the background to the a video brush (Dolphins.wmv). Note this is a very large video (~40MB) -->

        <TextBox.Background>

          <VideoBrush SourceName="me" Stretch="UniformToFill"/>

        </TextBox.Background>

 

         <!-- Set the foreground to another video -->

 

 

 

        <TextBox.Foreground>

          <VideoBrush SourceName="me2" Stretch="UniformToFill"/>

        </TextBox.Foreground>

      </TextBox>

 

<!-- Make a video button by setting the Button content to a MediaElement -->

      <Button FontSize="60" Width="100" Height="90">

        <MediaElement x:Name="me2" IsMuted="True" Source="https://joestegman.members.winisp.net/Mix08/Part1/Robots.wmv"/>

      </Button>

    </StackPanel>

 

    <!-- Add a hidden media element - this is used by the TextBox background brush -->

 

 

 

 

    <MediaElement x:Name="me" Width="0" Opacity="0" Source="https://joestegman.members.winisp.net/Mix08/Part1/Dolphins.wmv"/>

  </Grid>

</UserControl>

Comments