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>
感谢。
答案 0 :(得分：1)
各种框架控件的可触摸区域没有什么“魔力”。它们只有占据合理数量的屏幕空间的元素，并处理他们收到的触摸事件。您可以通过更改Thumb的模板来增加命中测试区域以增加其大小，但只能使模板的一小部分可见。