Rob Relyea

xaml:Blog

Databinding + Datavisualization Demo with WPF/XAML/VB

Many people say that Databinding is one of the more impactful of the features in WPF.
Namita wrote a great set of demos for her PDC talk about Databinding with WPF.

As part of a few talks (some VB customers, a Vista + WPF talk, a talk at the Borland Developer Conference), I used that demo.

I've finally gotten around to posting my version of it.

Here is a screen shot of the auction window:

If you click on the Map button in bottom left of that, a nice data visualization example is shown using a custom tree map control that I believe Kevin Moore wrote:

 

The app has a good separation between the data and the UI...

The items on the left of the auction window are just renderings for each AuctionItem in a listbox.

From Window1.xaml:

<ListBox ItemsSource="{Binding Path=.}"
     LayoutTransform="scale .7 .7"
     Grid.Column="0"
     Name="itemDisplay"
     />

The rendering for each auction item is controlled by a data template that was specified in myapp.xaml declaratively.

<DataTemplate DataType="{x:Type local:AuctionItem}" >
   <Viewbox>
    <Grid  Margin="0" Width="250" Height="200">
     <Grid.LayoutTransform>
      <ScaleTransform ScaleX="1.5" ScaleY="1.5"/>
     </Grid.LayoutTransform>
     <!-- image element -->
     <Ellipse
      Width="200"
      HorizontalAlignment="Right"
         Margin="10"
         >
      <Ellipse.Fill>
       <Binding Path="RemainingSeconds">
        <Binding.Converter>
         <local:ColorDateConverter/>
        </Binding.Converter>
       </Binding>
      </Ellipse.Fill>
     </Ellipse>
     
     <Border HorizontalAlignment="Center" VerticalAlignment="Center"             
      Padding="4" Margin="30" BorderBrush="#D2CFCF"
      BorderThickness="1" Background="White">
      <Image>
       <Image.Source>
        <Binding Path="Image"/>
       </Image.Source>

      </Image>
     </Border>


     <Viewbox Height="80" Width="80" Margin="10"
        HorizontalAlignment="Right"
        VerticalAlignment="Center"
        >
      <!-- clock background -->
      <Grid>
       <Ellipse Width="100" Height="100" Margin="4"
        HorizontalAlignment="right"
        VerticalAlignment="bottom">
        <Ellipse.Fill>
         <Binding Path="RemainingSeconds">
          <Binding.Converter>
           <local:ColorDateConverter/>
          </Binding.Converter>
         </Binding>
        </Ellipse.Fill>
       </Ellipse>

 


       <!-- time remaining Days text -->

       <TextBlock
        FontSize="40px"
        TextAlignment="Center"
        Width="100"
        HorizontalAlignment="right"
        FontFamily="Segoe"
        Foreground="#5B5C59"  
        VerticalAlignment="Bottom"
        Height="80" 
        Text="{Binding Path=RemainingSeconds}"/>


       <TextBlock FontSize="10px" Foreground="#AAFFFFFF" Height="36"
        HorizontalAlignment="right" FontFamily="Segoe"
        VerticalAlignment="Bottom"
         TextAlignment="Center" Width="100"   Text="SECONDS" />

 

       <!-- hour hand -->
       <Canvas  HorizontalAlignment="Right"
        VerticalAlignment="Bottom" Height="100" Width="100">


        <Line StrokeThickness="3pt"  Stroke="#6FFFFFFF"
       X1="50" Y1="50" >
         <Line.Y2>
          <MultiBinding>
           <MultiBinding.Converter>
            <local:PosYConverter/>
           </MultiBinding.Converter>
           <Binding Path="RemainingSeconds"/>
           <Binding Path="StartDate"/>
          </MultiBinding>
         </Line.Y2>
         <Line.X2>
          <MultiBinding>
           <MultiBinding.Converter>
            <local:PosXConverter/>
           </MultiBinding.Converter>
           <Binding Path="RemainingSeconds"/>
           <Binding Path="StartDate"/>
          </MultiBinding>
         </Line.X2>
        </Line>

        <Ellipse Width="10" Height="10"
            Canvas.Top="45" Canvas.Left="45"
            Fill="#6FFFFFFF" />


       </Canvas>

 

       <!-- Clock chrome -->

       <Ellipse Width="100" Height="100" HorizontalAlignment="right" Margin="4"
        VerticalAlignment="bottom"
        RenderTransform="scale 1 -1 translate 0 57" >
        <Ellipse.Fill>
         <RadialGradientBrush Center="0.5,0.1" RadiusX="1.5" >
          <RadialGradientBrush.GradientStops>
           <GradientStopCollection>
            <GradientStop Offset="0" Color="#AAFFFFFF" />
            <GradientStop Offset="0.18" Color="Transparent" />
           </GradientStopCollection>
          </RadialGradientBrush.GradientStops>
         </RadialGradientBrush>
        </Ellipse.Fill>
       </Ellipse>

       <Ellipse Width="100" Height="100"
        HorizontalAlignment="right"  Margin="4"
        VerticalAlignment="bottom" RenderTransform="scale 1 -1 translate 0 120" >
        <Ellipse.Fill>
         <RadialGradientBrush Center="0.5,0.2" RadiusX="1.2" >
          <RadialGradientBrush.GradientStops>
           <GradientStopCollection>
            <GradientStop Offset="0" Color="#66FFFFFF" />
            <GradientStop Offset="0.35" Color="Transparent" />
           </GradientStopCollection>
          </RadialGradientBrush.GradientStops>
         </RadialGradientBrush>
        </Ellipse.Fill>
       </Ellipse>
       <Ellipse Width="100" Height="100"
        HorizontalAlignment="right"
        VerticalAlignment="bottom"  Margin="4"
        Stroke="VerticalGradient #66FFFFFF #44FFFFFF" StrokeThickness="1.5" />
       <Ellipse Width="102" Height="102"
        HorizontalAlignment="Right"
        VerticalAlignment="Bottom"  Margin="4"
        Stroke="VerticalGradient #11000000 #33000000"  StrokeThickness="1.5"  RenderTransform="translate 1 1" />
      </Grid>
     </Viewbox>


     </Grid>
   </Viewbox>
  </DataTemplate>

Dig into the demo and go watch Namita's pdc talk!

Please let us know what you think.

Posted on Nov 10 2005, 01:40 PM by rrelyea
Filed under: , ,
PostTypeIcon
26,467 Views

Comments

  • Tatjana and I cleaned out the kitchen last weekend and now is the time to clean the @Blog folder again....
    November 15, 2005 1:46 PM
  • Rob Relyea said:
    WPF has some great Data Visualization features.&amp;nbsp;I'm working with&amp;nbsp;Kevin Moore, other WPF teammates...
    April 26, 2006 11:01 PM
  • Andrei Iacob said:
    Hello, Multă lume m-a &amp;icirc;ntrebat şi se şi &amp;icirc;ntreabă de facilităţile oferite de Windows Presentation
    September 19, 2006 5:13 PM
  • Andrei Iacob said:
    Hello, Multă lume m-a &amp;icirc;ntrebat şi se şi &amp;icirc;ntreabă de facilităţile oferite de Windows Presentation
    September 19, 2006 5:15 PM
  • Andrei Iacob said:
    Hello, Multă lume m-a &amp;icirc;ntrebat şi se şi &amp;icirc;ntreabă de facilităţile oferite de Windows Presentation
    September 19, 2006 5:19 PM
  • Andrei Iacob said:
    Hello, Multă lume m-a &amp;icirc;ntrebat şi se şi &amp;icirc;ntreabă de facilităţile oferite de Windows Presentation
    September 19, 2006 6:13 PM