3D RSS XAML Demonstration

Here's a short application I wrote for a demo recently. This is a rather simple RSS application, but I created it in 3D in XAML using the February CTP of WinFX. Also, the code is self-sufficient. That is, you can use the below XAML declaration in XAMLPad.

The first thing to notice about this application is that the data is real. That is, the actually RSS information you are seeing on the screen is from a live RSS feed; this demonstrates XAML's XML data-binding capabilities. The next thing to notice is that the entire thing is on an angle. That's because this is all rendered in 3D. So, this also demonstrates using XAML in 3D. You should also notice the background. This is actually just a JPG on my website. There is no C#/VB.NET anywhere... it's all XAML. This demonstrates the power to skin objects. Finally, you should notice that the rendering has different font styles and sizes. This demonstrates how you can style controls... yes, controls. There's nothing fancy here. There isn't really a "3D TextBlock" or anything. A TextBlock is a TextBlock. I just so happen to be using it in 3D.

So, there are many things this demo demonstrates. I actually recorded a short video lesson on 3D XAML programming and I will be releasing it very soon. In the future I may have an entire series on 3D XAML programming.

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewport3D>
    <Viewport3D.Resources>
      <XmlDataProvider x:Key="xmlData" Source="http://fxfeeds.mozilla.com/rss20.xml">
      </XmlDataProvider>
      <Style x:Key="rssTitle" TargetType="{x:Type TextBlock}">
        <Setter Property="FontSize" Value="24"/>
        <Setter Property="TextBlock.Foreground">
          <Setter.Value>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="Blue" Offset="0"/>
                <GradientStop Color="Green" Offset="1"/>
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Setter.Value>
        </Setter>
      </Style>
      <Style x:Key="rssText" TargetType="{x:Type TextBlock}">
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="Foreground" Value="Gray"/>
      </Style>
    </Viewport3D.Resources>
    <Viewport3D.Camera>
      <PerspectiveCamera
        Position="2.5,2.5,5"
        LookDirection="-.5,-.5,-1"
        FieldOfView="45"
        UpDirection="1,0,0"
        >
      </PerspectiveCamera>
    </Viewport3D.Camera>
    <ModelVisual3D>
      <ModelVisual3D.Content>
        <Model3DGroup>
          <AmbientLight Color="White"></AmbientLight>
          <GeometryModel3D>
            <GeometryModel3D.Geometry>
              <MeshGeometry3D
                Positions="-1, -1, 0  1, -1, 0  -1, 1, 0  1, 1, 0"
                TriangleIndices="2 0 1 3 2 1"
                TextureCoordinates="1 1 1 0 0 1 0 0"
                Normals="0,0,1 0,0,1 0,0,1 0,0,1">
              </MeshGeometry3D>
            </GeometryModel3D.Geometry>
            <GeometryModel3D.Material>
              <DiffuseMaterial>
                <DiffuseMaterial.Brush>
                  <VisualBrush>
                    <VisualBrush.Visual >
                      <StackPanel>
                        <ListBox ItemsSource="{Binding Source={StaticResource xmlData}, XPath=rss/channel/item}">
                          <ListBox.Background>
                            <ImageBrush ImageSource="http://davidbetz.net/kansas/xamlimage.jpg"></ImageBrush>
                          </ListBox.Background>
                          <ListBox.ItemTemplate>
                            <DataTemplate>
                              <StackPanel>
                                <TextBlock Text="{Binding XPath=title}" Style="{StaticResource rssTitle}"></TextBlock>
                                <TextBlock Text="{Binding XPath=description}" Style="{StaticResource rssText}"></TextBlock>
                              </StackPanel>
                            </DataTemplate>
                          </ListBox.ItemTemplate>
                        </ListBox>
                      </StackPanel>
                    </VisualBrush.Visual>
                  </VisualBrush>
                </DiffuseMaterial.Brush>
              </DiffuseMaterial>
            </GeometryModel3D.Material>
          </GeometryModel3D>
        </Model3DGroup>
      </ModelVisual3D.Content>
    </ModelVisual3D>
  </Viewport3D>
</Page>

• 3D RSS Xaml Demo ScreenShot
• 3D RSS Xaml Demo Xaml Declaration