Некоторые элементы управления в 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>
Спасибо.