Сенсорная область вокруг элемента управления

Question

Некоторые элементы управления в Windows Phone 7 имеют осязаемую область вокруг, если вы не касаетесь точно не контроля, но в этой области событие все еще поднимается из элемента управления (я не знаю, как назвать эту область правильно, но может показать его на снимке экрана). У меня есть пользовательский слайдер с возможностью выбора диапазона, но его слишком сложно прикоснуться к ползунку слайдера и переместить его. Увеличение большого пальца нежелательно. Как добавить сенсорную область к слайдеру, чтобы облегчить их позиционирование? Вот XAML слайдера:

<Style TargetType="local:RangeSlider"> 
    <Setter Property="BorderThickness" Value="1" /> 
    <Setter Property="BorderBrush" Value="Black" /> 
    <Setter Property="Background" Value="Black" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="local:RangeSlider"> 
       <Border Padding="{TemplateBinding Padding}" 
         > 
        <Grid> 
         <Rectangle Fill="#FFCCCCCC" VerticalAlignment="Center" Margin="2.5,0,2.5,0" Height="12" StrokeThickness="0" /> 
         <Border x:Name="SelectedRangeBorder" 
           Margin="0" Height="12"> 
          <Grid> 
           <Grid.Resources> 
            <Style x:Key="EndThumbStyle" TargetType="Thumb"> 
             <Setter Property="Background" Value="Black"/> 
             <Setter Property="BorderThickness" Value="1"/> 
             <Setter Property="IsTabStop" Value="False"/> 
             <Setter Property="BorderBrush"> 
              <Setter.Value> 
               <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
                <GradientStop Color="#FFCD0000" Offset="0"/> 
                <GradientStop Color="#FFCD0000" Offset="0.375"/> 
                <GradientStop Color="#FFCD0000" Offset="0.375"/> 
                <GradientStop Color="#FFCD0000" Offset="1"/> 
               </LinearGradientBrush> 
              </Setter.Value> 
             </Setter> 
             <Setter Property="Template"> 
              <Setter.Value> 
               <ControlTemplate TargetType="Thumb"> 
                <Grid Background="Black" Width="12" Height="12" Margin="-3,-4,-5,-4"> 
                 <VisualStateManager.VisualStateGroups> 
                  <VisualStateGroup x:Name="CommonStates"> 
                   <VisualState x:Name="Normal"/> 
                   <VisualState x:Name="MouseOver"> 
                    <Storyboard> 
                     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity"> 
                      <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
                     </DoubleAnimationUsingKeyFrames> 
                    </Storyboard> 
                   </VisualState> 
                   <VisualState x:Name="Pressed"> 
                    <Storyboard> 
                     <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"> 
                      <SplineColorKeyFrame KeyTime="0" Value="Red"/> 
                     </ColorAnimationUsingKeyFrames> 
                     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity"> 
                      <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
                     </DoubleAnimationUsingKeyFrames> 
                    </Storyboard> 
                   </VisualState> 
                   <VisualState x:Name="Disabled"> 
                    <Storyboard> 
                     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity"> 
                      <SplineDoubleKeyFrame KeyTime="0" Value=".55"/> 
                     </DoubleAnimationUsingKeyFrames> 
                    </Storyboard> 
                   </VisualState> 
                  </VisualStateGroup> 
                  <VisualStateGroup x:Name="FocusStates"> 
                   <VisualState x:Name="Focused"> 
                    <Storyboard> 
                     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity"> 
                      <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
                     </DoubleAnimationUsingKeyFrames> 
                    </Storyboard> 
                   </VisualState> 
                   <VisualState x:Name="Unfocused"/> 
                  </VisualStateGroup> 
                 </VisualStateManager.VisualStateGroups> 
                 <Border x:Name="Background" Background="#FFCCCCCC" BorderBrush="{TemplateBinding BorderBrush}" Width="12" Height="12"> 
                  <Grid Margin="0" Width="12" Height="12" d:IsHidden="True"> 
                   <Border x:Name="BackgroundAnimation" Opacity="0" Background="Black"/> 
                   <Rectangle x:Name="BackgroundGradient" StrokeThickness="0" Fill="Black"/> 
                  </Grid> 
                 </Border> 
                 <Rectangle x:Name="DisabledVisualElement" Fill="Black" IsHitTestVisible="false" Opacity="0" Margin="0" StrokeThickness="0" Width="12" Height="12"/> 
                 <Rectangle x:Name="FocusVisualElement" Stroke="#FFCCCCCC" StrokeThickness="0" Margin="0" IsHitTestVisible="false" Opacity="0" Width="12" Height="12"/> 
                 <StackPanel Orientation="Horizontal" Margin="0" MaxHeight="10" Width="12" Height="12"> 
                  <Rectangle Width="12" Fill="Black" Height="12" StrokeThickness="0" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
                  <Rectangle Fill="Black" Width="12" Margin="1,-5,0,0" Height="12" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
                 </StackPanel> 
                </Grid> 
               </ControlTemplate> 
              </Setter.Value> 
             </Setter> 
            </Style> 
           </Grid.Resources> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="Auto" /> 
            <ColumnDefinition Width="*" /> 
            <ColumnDefinition Width="Auto" /> 
           </Grid.ColumnDefinitions> 

           <Thumb x:Name="RangeCenterThumb" 
             Grid.Column="1" 
             Cursor="Hand" 
             Margin="0" 
             BorderThickness="0" Width="Auto" Height="12" Foreground="#FFCD0000" Background="#FFCD0000" 
             > 
            <Thumb.Style> 
             <Style TargetType="Thumb"> 
              <Setter Property="Template"> 
               <Setter.Value> 
                <ControlTemplate TargetType="Thumb"> 
                 <Grid Background="#FFCD0000" Height="12"> 
                  <Border BorderBrush="{TemplateBinding BorderBrush}" 
                   BorderThickness="{TemplateBinding BorderThickness}" 
                   Background="{TemplateBinding Background}" 
                   /> 
                 </Grid> 
                </ControlTemplate> 
               </Setter.Value> 
              </Setter> 
             </Style> 
            </Thumb.Style> 
           </Thumb> 
           <Thumb x:Name="RangeStartThumb" 
             Cursor="SizeWE" 
             Width="12" 
             Style="{StaticResource EndThumbStyle}" 
             BorderThickness="{TemplateBinding BorderThickness}" Height="12" Foreground="Black" Background="Black" BorderBrush="Black" 
             /> 
           <Thumb x:Name="RangeEndThumb" 
             Grid.Column="2" 
             Cursor="SizeWE" 
             Width="12" 
             Style="{StaticResource EndThumbStyle}" 
             BorderBrush="Black" Height="12" Foreground="Black" BorderThickness="0" 
             /> 
          </Grid> 
         </Border> 
        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Спасибо.

Answer 1

Нет ничего «волшебного» в осязаемой области различных элементов управления каркасом. У них просто есть элементы, которые занимают разумное количество экранной недвижимости и обрабатывают события касания, которые они получают. Вы можете увеличить область вашего теста, изменив шаблон своего Thumb, чтобы увеличить его размер, но только сделать небольшую часть видимого шаблона.