Another Mix08 sample


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="http://schemas.microsoft.com/client/2007" xmlns:x=http://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="http://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="http://joestegman.members.winisp.net/Mix08/Part1/Dolphins.wmv"/>


  </Grid>


</UserControl>


 

Comments (5)

  1. Love the new UserControl methods bro, awesome!

  2. kierepka says:

    Nice, but Polish national characters can’t be inserted into text box! I must send this as a bug in SL 2.0 Beta

  3. Don&#39;t even think this is all there is… this is just the surface 10%, I think it&#39;ll take me

Skip to main content