Silverlight

Using two-way binding in xamWebMap

[Infragistics] Devin Rader — Mon, 02 Mar 2009 19:16:35 GMT

This snippet demonstrates how you can use the map controls ValueTemplate to allow end users to modify map element values using two-way binding.

<igMap:XamWebMap x:Name="MyMap">
  <igMap:XamWebMap.Layers>
    <igMap:MapLayer FillMode="Chloropleth" IsSensitive="False">
      <igMap:MapLayer.ValueTemplate>
        <DataTemplate>
          <StackPanel Orientation="Horizontal">
            <Slider Width="100" Minimum="70000" Maximum="17000000"
                Value="{Binding Value, Mode=TwoWay}" />
            <TextBlock Text="{Binding Value}" />
          </StackPanel>
        </DataTemplate>
      </igMap:MapLayer.ValueTemplate>
      <igMap:MapLayer.Reader>
        <igMap:ShapeFileReader DataMapping="Value=POP_ADMIN" 
            Uri="http://www.foo.com/argentina"/>
      </igMap:MapLayer.Reader>
      <igMap:MapLayer.ValueScale>
        <igMap:LinearScale IsAutoRange="False" 
            MinimumValue="70000" MaximumValue="17000000" />
      </igMap:MapLayer.ValueScale>
    </igMap:MapLayer>
  </igMap:XamWebMap.Layers>
</igMap:XamWebMap>

Technorati Tags: xamWebMap,Silverlight

Create an LED-style for xamWebSegmentedDisplay

[Infragistics] Devin Rader — Sat, 28 Feb 2009 22:14:53 GMT

The following sample shows how to use a ControlTemplate to change the style of the xamWebSegmentedDisplay control to an LED style display:

<igGauge:XamWebSegmentedDisplay Text="1234567890" Digits="10"
      SegmentMode="SevenSegment" TextForeground="#FFFF3A00"
      TextForegroundUnlit="#FF353232" Background="#FF000000"
      Height="100" Width="500">
  <igGauge:XamWebSegmentedDisplay.DigitStyle>
    <Style TargetType="igGauge:SevenSegmentDigit">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="igGauge:SevenSegmentDigit">
            <Canvas x:Name="RootElement">
              <Path Data="M20.5,9.5 C20.5,14.470563 16.022848,18.5 10.5,
                    18.5 C4.9771523,18.5 0.5,14.470563 0.5,9.5 C0.5,
                    4.5294371 4.9771523,0.5 10.5,0.5 C16.022848,0.5 20.5,
                    4.5294371 20.5,9.5 z M20.5,32.5 C20.5,37.470562 16.022848,
                    41.5 10.5,41.5 C4.9771523,41.5 0.5,37.470562 0.5,
                    32.5 C0.5,27.529438 4.9771523,23.5 10.5,23.5 C16.022848,
                    23.5 20.5,27.529438 20.5,32.5 z M20.5,55.5 C20.5,
                    60.470562 16.022848,64.5 10.5,64.5 C4.9771523,64.5 0.5,
                    60.470562 0.5,55.5 C0.5,50.529438 4.9771523,46.5 10.5,
                    46.5 C16.022848,46.5 20.5,50.529438 20.5,55.5 z"
                    Canvas.Top="69" x:Name="leftBottom"/>
              <Path Data="M20.5,9.5 C20.5,14.470563 16.022848,18.5 10.5,
                    18.5 C4.9771523,18.5 0.5,14.470563 0.5,9.5 C0.5,
                    4.5294371 4.9771523,0.5 10.5,0.5 C16.022848,0.5 20.5,
                    4.5294371 20.5,9.5 z M20.5,32.5 C20.5,37.470562 16.022848,
                    41.5 10.5,41.5 C4.9771523,41.5 0.5,37.470562 0.5,
                    32.5 C0.5,27.529438 4.9771523,23.5 10.5,23.5 C16.022848,
                    23.5 20.5,27.529438 20.5,32.5 z M20.5,55.5 C20.5,
                    60.470562 16.022848,64.5 10.5,64.5 C4.9771523,64.5 0.5,
                    60.470562 0.5,55.5 C0.5,50.529438 4.9771523,46.5 10.5,
                    46.5 C16.022848,46.5 20.5,50.529438 20.5,55.5 z" 
                    x:Name="leftTop"/>
              <Path Data="M20.5,9.5 C20.5,14.470563 16.022848,18.5 10.5,
                    18.5 C4.9771523,18.5 0.5,14.470563 0.5,9.5 C0.5,
                    4.5294371 4.9771523,0.5 10.5,0.5 C16.022848,0.5 20.5,
                    4.5294371 20.5,9.5 z M45.5,9.5 C45.5,14.470563 41.02285,
                    18.5 35.5,18.5 C29.977152,18.5 25.5,14.470563 25.5,
                    9.5 C25.5,4.5294371 29.977152,0.5 35.5,0.5 C41.02285,
                    0.5 45.5,4.5294371 45.5,9.5 z" 
                    Canvas.Top="115" Canvas.Left="23" x:Name="bottom"/>
              <Path Data="M20.5,9.5 C20.5,14.470563 16.022848,18.5 10.5,
                    18.5 C4.9771523,18.5 0.5,14.470563 0.5,9.5 C0.5,
                    4.5294371 4.9771523,0.5 10.5,0.5 C16.022848,0.5 20.5,
                    4.5294371 20.5,9.5 z M45.5,9.5 C45.5,14.470563 41.02285,
                    18.5 35.5,18.5 C29.977152,18.5 25.5,14.470563 25.5,
                    9.5 C25.5,4.5294371 29.977152,0.5 35.5,0.5 C41.02285,
                    0.5 45.5,4.5294371 45.5,9.5 z" 
                    Canvas.Left="23" x:Name="top"/>
              <Path Data="M20.5,9.5 C20.5,14.470563 16.022848,18.5 10.5,
                    18.5 C4.9771523,18.5 0.5,14.470563 0.5,9.5 C0.5,
                    4.5294371 4.9771523,0.5 10.5,0.5 C16.022848,0.5 20.5,
                    4.5294371 20.5,9.5 z M45.5,9.5 C45.5,14.470563 41.02285,
                    18.5 35.5,18.5 C29.977152,18.5 25.5,14.470563 25.5,
                    9.5 C25.5,4.5294371 29.977152,0.5 35.5,0.5 C41.02285,
                    0.5 45.5,4.5294371 45.5,9.5 z" 
                    Canvas.Top="58" Canvas.Left="23" x:Name="middle"/>
              <Path Data="M20.5,9.5 C20.5,14.470563 16.022848,18.5 10.5,
                    18.5 C4.9771523,18.5 0.5,14.470563 0.5,9.5 C0.5,
                    4.5294371 4.9771523,0.5 10.5,0.5 C16.022848,0.5 20.5,
                    4.5294371 20.5,9.5 z M20.5,32.5 C20.5,37.470562 16.022848,
                    41.5 10.5,41.5 C4.9771523,41.5 0.5,37.470562 0.5,
                    32.5 C0.5,27.529438 4.9771523,23.5 10.5,23.5 C16.022848,
                    23.5 20.5,27.529438 20.5,32.5 z M20.5,55.5 C20.5,
                    60.470562 16.022848,64.5 10.5,64.5 C4.9771523,64.5 0.5,
                    60.470562 0.5,55.5 C0.5,50.529438 4.9771523,46.5 10.5,
                    46.5 C16.022848,46.5 20.5,50.529438 20.5,55.5 z" 
                    Canvas.Left="71" x:Name="rightTop"/>
              <Path Data="M20.5,9.5 C20.5,14.470563 16.022848,18.5 10.5,
                    18.5 C4.9771523,18.5 0.5,14.470563 0.5,9.5 C0.5,
                    4.5294371 4.9771523,0.5 10.5,0.5 C16.022848,0.5 20.5,
                    4.5294371 20.5,9.5 z M20.5,32.5 C20.5,37.470562 16.022848,
                    41.5 10.5,41.5 C4.9771523,41.5 0.5,37.470562 0.5,
                    32.5 C0.5,27.529438 4.9771523,23.5 10.5,23.5 C16.022848,
                    23.5 20.5,27.529438 20.5,32.5 z M20.5,55.5 C20.5,
                    60.470562 16.022848,64.5 10.5,64.5 C4.9771523,64.5 0.5,
                    60.470562 0.5,55.5 C0.5,50.529438 4.9771523,46.5 10.5,
                    46.5 C16.022848,46.5 20.5,50.529438 20.5,55.5 z" 
                    Canvas.Top="69" Canvas.Left="71" x:Name="rightBottom"/>
              <Ellipse Width="20" Height="20" Canvas.Left="96"
                       Canvas.Top="115" x:Name="dotBottom"/>
              <Ellipse Width="20" Height="20" Canvas.Left="96"
                       Canvas.Top="69" x:Name="dotTop"/>
            </Canvas>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </igGauge:XamWebSegmentedDisplay.DigitStyle>
</igGauge:XamWebSegmentedDisplay>

Using this custom template results in a display style like the following:

Technorati Tags: Silverlight,xamWebSegmentedDisplay

Custom Chart Data Point Templates

[Infragistics] Devin Rader — Sat, 28 Feb 2009 22:14:10 GMT

Here is an example of creating custom data point templates in a bubble chart. Data point templates allow you to provide custom UI for data points in a series. In this snippet, separate custom Data point templates are created for each of the three series included in the Bubble chart.

<igChart:XamWebChart Margin="5" Background="AliceBlue">
  <igChart:XamWebChart.Axes>
    <igChart:Axis AxisType="PrimaryX" AutoRange="False" 
                  Minimum="-100" Maximum="100" Unit="25" >
      <igChart:Axis.MajorGridline>
        <igChart:GridlineGroup Visibility="Collapsed"/>
      </igChart:Axis.MajorGridline>
      <igChart:Axis.Label>
        <igChart:LabelGroup Visibility="Collapsed"/>
      </igChart:Axis.Label>
      <igChart:Axis.MajorTickMark>
        <igChart:TickMarkGroup Visibility="Collapsed"/>
      </igChart:Axis.MajorTickMark>
      <igChart:Axis.Template>
        <ControlTemplate>
          <StackPanel>
            <Path Height="10" VerticalAlignment="Top" 
                  Stretch="Fill" Stroke="Silver" 
                  Data="M160,160 L560,160 L544.5,168.5 L560.5,
                  160.47223 L556.60596,158.68689 L544.02057,
                  152.91667 L560.00061,159.79167"/>
            <TextBlock Text="X Axis" TextAlignment="Right"/>
          </StackPanel>
        </ControlTemplate>
      </igChart:Axis.Template>
    </igChart:Axis>
    <igChart:Axis AxisType="PrimaryY" AutoRange="False" 
                  Minimum="-100" Maximum="100" Unit="25">
      <igChart:Axis.MajorGridline>
        <igChart:GridlineGroup Visibility="Collapsed"/>
      </igChart:Axis.MajorGridline>
      <igChart:Axis.Label>
        <igChart:LabelGroup Visibility="Collapsed"/>
      </igChart:Axis.Label>
      <igChart:Axis.MajorTickMark>
        <igChart:TickMarkGroup Visibility="Collapsed"/>
      </igChart:Axis.MajorTickMark>
      <igChart:Axis.Template>
        <ControlTemplate>
          <StackPanel>
            <Path Height="10" VerticalAlignment="Top" 
                  Stretch="Fill" Stroke="Silver" 
                  Data="M160,160 L560,160 L544.5,168.5 L560.5,
                  160.47223 L556.60596,158.68689 L544.02057,
                  152.91667 L560.00061,159.79167"/>
            <TextBlock Text="Y axis" TextAlignment="Right"/>
          </StackPanel>
        </ControlTemplate>
      </igChart:Axis.Template>
    </igChart:Axis>
  </igChart:XamWebChart.Axes>

  <igChart:XamWebChart.Series>
    <igChart:Series ChartType="Bubble">
      <igChart:Series.DataPointStyle>
        <Style TargetType="igChart:BubbleChartDataPointTemplate">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="igChart:BubbleChartDataPointTemplate">
                <StackPanel Orientation="Vertical">
                  <Path Width="50" Height="50" Stretch="Uniform" 
                        Fill="{TemplateBinding Fill}" 
                        Stroke="{TemplateBinding Stroke}" 
                        Data="M81.5,0.50059509 C81.5,0.50059509 0.5,
                        -0.49940491 0.5,79.500595 C0.5,159.5006 81,160.99916 81,
                        160.99916 C81,160.99916 161,160.50072 161,80.749588 C161,
                        0.99845886 81.5,0.50059509 81.5,0.50059509 z M81.5,
                        40.500595 C81.5,40.500595 40.5,39.500595 40.5,
                        79.500595 C40.5,119.5006 81,120.00294 81,120.00294 C81,
                        120.00294 121,120.49986 121,80.747543 C121,
                        40.995224 81.5,40.500595 81.5,40.500595 z"/>
                </StackPanel>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </igChart:Series.DataPointStyle>
      <igChart:Series.DataPoints>
        <igChart:DataPoint>
          <igChart:DataPoint.ChartParameters>
            <igChart:ChartParameter Type="ValueX" Value="55"/>
            <igChart:ChartParameter Type="ValueY" Value="55"/>
            <igChart:ChartParameter Type="Radius" Value="1"/>
          </igChart:DataPoint.ChartParameters>
        </igChart:DataPoint>
        <igChart:DataPoint>
          <igChart:DataPoint.ChartParameters>
            <igChart:ChartParameter Type="ValueX" Value="-25"/>
            <igChart:ChartParameter Type="ValueY" Value="-50"/>
            <igChart:ChartParameter Type="Radius" Value="1"/>
          </igChart:DataPoint.ChartParameters>
        </igChart:DataPoint>
        <igChart:DataPoint>
          <igChart:DataPoint.ChartParameters>
            <igChart:ChartParameter Type="ValueX" Value="30"/>
            <igChart:ChartParameter Type="ValueY" Value="20"/>
            <igChart:ChartParameter Type="Radius" Value="1"/>
          </igChart:DataPoint.ChartParameters>
        </igChart:DataPoint>
      </igChart:Series.DataPoints>
    </igChart:Series>

    <igChart:Series ChartType="Bubble">
      <igChart:Series.DataPointStyle>
        <Style TargetType="igChart:BubbleChartDataPointTemplate">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="igChart:BubbleChartDataPointTemplate">
                <StackPanel Orientation="Vertical">
                  <Path Width="50" Height="50" Stretch="Uniform" 
                        Fill="{TemplateBinding Fill}" 
                        Stroke="{TemplateBinding Stroke}" 
                        Data="M122.14112,40.499996 L97.800911,97.301941 L40.5,
                        121.13847 L97.447197,144.826 L121.63716,
                        200.5 L145.82712,144 L201.5,120 L145,96 z M122.1293,
                        0.5 L161,79.999992 L241.50002,120 L161.83472,
                        160 L121.62669,240.5 L81.418655,160.83401 L0.5,
                        121.12747 L81.754425,81.254791 z"/>
                </StackPanel>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </igChart:Series.DataPointStyle>
      <igChart:Series.DataPoints>
        <igChart:DataPoint>
          <igChart:DataPoint.ChartParameters>
            <igChart:ChartParameter Type="ValueX" Value="20"/>
            <igChart:ChartParameter Type="ValueY" Value="50"/>
            <igChart:ChartParameter Type="Radius" Value="1"/>
          </igChart:DataPoint.ChartParameters>
        </igChart:DataPoint>
        <igChart:DataPoint>
          <igChart:DataPoint.ChartParameters>
            <igChart:ChartParameter Type="ValueX" Value="10"/>
            <igChart:ChartParameter Type="ValueY" Value="-40"/>
            <igChart:ChartParameter Type="Radius" Value="1"/>
          </igChart:DataPoint.ChartParameters>
        </igChart:DataPoint>
      </igChart:Series.DataPoints>
    </igChart:Series>

    <igChart:Series ChartType="Bubble">
      <igChart:Series.DataPointStyle>
        <Style TargetType="igChart:BubbleChartDataPointTemplate">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="igChart:BubbleChartDataPointTemplate">
                <StackPanel Orientation="Vertical">
                  <Path Width="50" Height="50" Stretch="Uniform" 
                        Fill="{TemplateBinding Fill}" 
                        Stroke="{TemplateBinding Stroke}" 
                        Data="M119.4997,102.50001 L40.500313,103.52042 C40.500313,
                        103.52042 40.000317,127.50001 80.000008,
                        127.50001 C119.99969,127.50001 119.4997,
                        102.50001 119.4997,102.50001 z M116,40.5 C105.23045,
                        40.5 96.5,45.648724 96.5,52 C96.5,58.351276 105.23045,
                        63.5 116,63.5 C126.76955,63.5 135.5,58.351276 135.5,
                        52 C135.5,45.648724 126.76955,40.5 116,40.5 z M52,
                        40.5 C41.230446,40.5 32.5,45.648724 32.5,52 C32.5,
                        58.351276 41.230446,63.5 52,63.5 C62.769554,63.5 71.5,
                        58.351276 71.5,52 C71.5,45.648724 62.769554,40.5 52,
                        40.5 z M80,0.5 C123.90664,0.5 159.5,36.317219 159.5,
                        80.5 C159.5,124.68278 123.90664,160.5 80,160.5 C36.093361,
                        160.5 0.50000083,124.68278 0.5,80.5 C0.50000083,
                        36.317219 36.093361,0.5 80,0.5 z"/>
                </StackPanel>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </igChart:Series.DataPointStyle>
      <igChart:Series.DataPoints>
        <igChart:DataPoint>
          <igChart:DataPoint.ChartParameters>
            <igChart:ChartParameter Type="ValueX" Value="-50"/>
            <igChart:ChartParameter Type="ValueY" Value="30"/>
            <igChart:ChartParameter Type="Radius" Value="1"/>
          </igChart:DataPoint.ChartParameters>
        </igChart:DataPoint>
        <igChart:DataPoint>
          <igChart:DataPoint.ChartParameters>
            <igChart:ChartParameter Type="ValueX" Value="-80"/>
            <igChart:ChartParameter Type="ValueY" Value="-70"/>
            <igChart:ChartParameter Type="Radius" Value="1"/>
          </igChart:DataPoint.ChartParameters>
        </igChart:DataPoint>
      </igChart:Series.DataPoints>
    </igChart:Series>
  </igChart:XamWebChart.Series>

  <igChart:XamWebChart.Legend>
    <igChart:Legend Visibility="Collapsed"/>
  </igChart:XamWebChart.Legend>
</igChart:XamWebChart>

Using the templates in the three chart series results in a chart that looks like this:

Technorati Tags: Silverlight,xamWebChart