觸摸區域控制

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

關於各種框架控件的可觸摸區域沒有什麼「魔力」。他們只擁有佔用合理數量的屏幕空間並處理他們所接收的觸摸事件的元素。您可以通過更改您的拇指模板來增加您的命中測試區域，以增加它的大小，但只能使模板的一小部分可見。