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. wisemx says:

    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