Как я могу добавить большой палец к слайдеру, не теряя при этом поведения касания слайдера? - PullRequest
Новая
       9

Как я могу добавить большой палец к слайдеру, не теряя при этом поведения касания слайдера?

1 голос
/ 09 ноября 2010

Вопрос может показаться странным, вот он:

Ползунки в Silverlight 3 для Windows Phone имеют большой палец, но он установлен прозрачным: 

<ControlTemplate x:Key="PhoneSimpleThumb" TargetType="Thumb">
    <Rectangle Fill="Transparent"/>
</ControlTemplate>

Все работает нормально с вышеупомянутымв настройках, если я коснусь угла (или части) ползунка, активная зона переместится к этому углу и т. д. ...

Теперь Если я хочу добавить изображение большого пальца, скажем что-то вроде: 

<ControlTemplate x:Key="PercentageThumbHorizontal" TargetType="Thumb">
        <Border Margin="-480,-18">
            <Rectangle Width="20" Height="20" RenderTransformOrigin="0.4,0.1" Margin="471,18,470,0" VerticalAlignment="Top" d:LayoutOverrides="Height">
                <Rectangle.Fill>
                    <ImageBrush Stretch="Fill" ImageSource="Resources/DesignElements/SliderThumb.png"/>
                </Rectangle.Fill>
            </Rectangle>
        </Border>
    </ControlTemplate>

Ползунок теряет свое поведение, теперь я могу изменить его значение только с помощью события перетаскивания.Чтобы быть более точным, теперь, если я коснусь части ползунка, активная зона не перейдет в эту часть, но если я перетащу из одной части в другую, активная зона ползунка пойдет в направлении перетаскивания.это остальная часть кода, который будет использовать вышеуказанный шаблон (я использую только горизонтальный ползунок). 

    <Style x:Key="PercentageSliderStyle" TargetType="Slider">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Maximum" Value="10"/>
        <Setter Property="Minimum" Value="0"/>
        <Setter Property="Value" Value="0"/>
        <Setter Property="Background" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Slider">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalTrack"/>
                                        <DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalTrack"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalFill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalFill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto" MinWidth="378"/>
                            </Grid.ColumnDefinitions>
                            <Rectangle x:Name="HorizontalTrack" Grid.ColumnSpan="3" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2"/>
                            <Rectangle x:Name="HorizontalFill" Grid.Column="0" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50"/>
                            <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
                            <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
                            <Thumb x:Name="HorizontalThumb"   Width="1" Margin="-1,0,0,0" Grid.Column="1" Template="{StaticResource PercentageThumbHorizontal}" >
                                <!--<Thumb.RenderTransform>
                                    <ScaleTransform ScaleY="1" ScaleX="32"/>
                                </Thumb.RenderTransform> -->            
                            </Thumb>
                        </Grid>
                        <Grid x:Name="VerticalTemplate" Margin="{StaticResource PhoneVerticalMargin}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="0"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Rectangle x:Name="VerticalTrack" Fill="{TemplateBinding Background}" IsHitTestVisible="False" Margin="12,0" Opacity="0.2" Grid.RowSpan="3" Width="12"/>
                            <Rectangle x:Name="VerticalFill" Fill="{TemplateBinding Foreground}" IsHitTestVisible="False" Margin="12,0" Grid.Row="2" Width="12"/>
                            <RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Grid.Row="0" Template="{StaticResource PhoneSimpleRepeatButton}"/>
                            <RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Grid.Row="2" Template="{StaticResource PhoneSimpleRepeatButton}"/>
                            <Thumb x:Name="VerticalThumb" Grid.Column="1" Margin="-1,0,0,0" RenderTransformOrigin="0.5,0.5" Template="{StaticResource PhoneSimpleThumb}" Width="1">
                                <Thumb.RenderTransform>
                                    <ScaleTransform ScaleY="32" ScaleX="1"/>
                                </Thumb.RenderTransform>
                            </Thumb>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Кто-нибудь из вас понимает, что здесь происходит?

Спасибо.

1 Ответ

0 голосов
/ 09 ноября 2010

Большая отрицательная маржа 

<Border Margin="-480,-18">

это то место, где я бы начал искать.

Попробуйте сначала установить цвет для большого пальца.
Внесите небольшие изменения и постепенно добавьте желаемый стиль.

...