触摸区域控制

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

关于各种框架控件的可触摸区域没有什么“魔力”。他们只拥有占用合理数量的屏幕空间并处理他们所接收的触摸事件的元素。您可以通过更改您的拇指模板来增加您的命中测试区域，以增加它的大小，但只能使模板的一小部分可见。