where to add the Slider code in XAML WP8

Question

I have created a chart in my XAML page and i want to add sliders to enable users to zoom and pan the chart.I am following this tutorial and i am not sure in which part of the XAML file the Slider code below should be placed to enable zooming and panning:

        <Slider x:Name="zoomoffset" Minimum="0" Maximum="1" />
        <Slider x:Name="zoomoffset1" Minimum="0" Maximum="1" />
        <Slider x:Name="zoomcoefficient" Minimum="0" Maximum="1" Value="1"/>
        <Slider x:Name="zoomcoefficient1" Minimum="0" Maximum="1"Value="1"/>

This is the complete XAML file:

<phone:PhoneApplicationPage
x:Class="MyApplication.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MyApplication"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:sparrow="clr-namespace:Sparrow.Chart;assembly=Sparrow.Chart.WP8.45"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">



<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>



    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
        <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <sparrow:SparrowChart Theme="Metro" AxisHeight="30"> 
  <sparrow:SparrowChart.XAxis>
          <sparrow:LinearXAxis ZoomCoefficient="{Binding Value,ElementName=zoomcoefficient}" ZoomOffset="{Binding Value,ElementName=zoomoffset}"   />
   </sparrow:SparrowChart.XAxis>
    <sparrow:SparrowChart.YAxis>
         <sparrow:LinearYAxis  ZoomCoefficient="{Binding Value,ElementName=zoomcoefficient1}" ZoomOffset="{Binding Value,ElementName=zoomoffset1}"   />
   </sparrow:SparrowChart.YAxis>                
</sparrow:SparrowChart> 
 </Grid>
  </Grid>
  </phone:PhoneApplicationPage>

in which part of the XAMl file should the Slider code be pasted in order to be accessible by the chart?

Answer 1

For the ElementName binding to work, the Sliders just have to be in the same "namescope". Here that basically just means inside the page -- so wherever you like. Eg, to put them underneath the chart:

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <sparrow:SparrowChart Theme="Metro" AxisHeight="30"> 
        <sparrow:SparrowChart.XAxis>
            <sparrow:LinearXAxis ZoomCoefficient="{Binding Value,ElementName=zoomcoefficient}" ZoomOffset="{Binding Value,ElementName=zoomoffset}"   />
        </sparrow:SparrowChart.XAxis>
        <sparrow:SparrowChart.YAxis>
            <sparrow:LinearYAxis  ZoomCoefficient="{Binding Value,ElementName=zoomcoefficient1}" ZoomOffset="{Binding Value,ElementName=zoomoffset1}"   />
        </sparrow:SparrowChart.YAxis>                
    </sparrow:SparrowChart> 

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Slider x:Name="zoomoffset" Minimum="0" Maximum="1" />
        <Slider x:Name="zoomoffset1" Grid.Column="1" Minimum="0" Maximum="1" />
        <Slider x:Name="zoomcoefficient" Grid.Column="2" Minimum="0" Maximum="1" Value="1"/>
        <Slider x:Name="zoomcoefficient1" Grid.Column="3" Minimum="0" Maximum="1"Value="1"/>     
    </Grid>
</Grid>