Windows Phone 8 - 如何制作滑块＆＃34;拇指＆＃34;看不见还是禁用它？

Question

我想制作一张幻灯片，表示Windows手机电池的百分比

  <Slider x:Name="lvl" Margin="0,-4.76,243.199,299.491" Height="312.269" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" Maximum="100" SmallChange="1" LargeChange="5" Value="50" Orientation="Vertical" Background="#FF1F1F1F" HorizontalAlignment="Right" VerticalAlignment="Bottom" ValueChanged="lvl_ValueChanged" BorderThickness="2" Wienter code heredth="46.05" Grid.Column="1" >
            <Slider.OpacityMask>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Slider.OpacityMask>
            <Slider.Foreground>
                <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                    <GradientStop Color="Black"/>
                    <GradientStop Color="Red" Offset="1"/>
                    <GradientStop Color="#FF0610EC"/>
                    <GradientStop Color="#FF310D64" Offset="0.74"/>
                </LinearGradientBrush>enter code here
            </Slider.Foreground>
            <Slider.BorderBrush>
                <SolidColorBrush Color="White"/>
            </Slider.BorderBrush>
            <Slider.RenderTransform>
                <CompositeTransform Rotation="-90" TranslateX="-0.054" TranslateY="0.033" ScaleX="7"/>
            </Slider.RenderTransform>
    </Slider>

我该怎么办？我无法找到标签来执行此操作。

Answer 1

转到文档大纲＆gt;编辑模板;选择The Silder - ＆gt;右键单击 - ＆gt;编辑模板 - ＆gt;编辑副本

然后搜索作为Thumb的<Rectangle x:Name="HorizontalCenterElement"/>，如果您不希望它显示，请将其设置为<Rectangle Visibility="Collapsed" x:Name="HorizontalCenterElement"/>

完整模板

<Style x:Key="SliderStyle1" 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 PhoneChromeBrush}"/>
    <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}">
                        <Rectangle x:Name="HorizontalTrack" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50"/>
                        <Rectangle x:Name="HorizontalFill" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50">
                            <Rectangle.Clip>
                                <RectangleGeometry Rect="0, 0, 6, 12"/>
                            </Rectangle.Clip>
                        </Rectangle>
                        <Rectangle Visibility="Collapsed" x:Name="HorizontalCenterElement" Fill="{StaticResource PhoneForegroundBrush}" HorizontalAlignment="Left" Height="24" Margin="0,16,0,44" Width="12">
                            <Rectangle.RenderTransform>
                                <TranslateTransform/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                    </Grid>
                    <Grid x:Name="VerticalTemplate" Margin="{StaticResource PhoneVerticalMargin}">
                        <Rectangle x:Name="VerticalTrack" Fill="{TemplateBinding Background}" IsHitTestVisible="False" Margin="18,0,18,0" Width="12"/>
                        <Rectangle x:Name="VerticalFill" Fill="{TemplateBinding Foreground}" IsHitTestVisible="False" Margin="18,0,18,0" Width="12">
                            <Rectangle.Clip>
                                <RectangleGeometry Rect="0, 0, 12, 6"/>
                            </Rectangle.Clip>
                        </Rectangle>
                        <Rectangle x:Name="VerticalCenterElement" Fill="{StaticResource PhoneForegroundBrush}" Height="12" Margin="12,0,12,0" VerticalAlignment="Top" Width="24">
                            <Rectangle.RenderTransform>
                                <TranslateTransform/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

---

使用我们的自定义模板的示例Silder代码

<Slider Value="5" Style="{StaticResource SliderStyle1}"></Slider>

预期产出

Answer 2

您应该在滑块样式中将“Horizo​​ntalCenterElement”矩形“Visibility”属性更改为“Collasped”。

这是我的源代码CustomSliderDesign

<!--change the rectangle-->
<Rectangle x:Name="HorizontalCenterElement"
           Visibility="Collapsed"
           Fill="Blue"
           HorizontalAlignment="Left"
           Height="24"
           Margin="0,16,0,44"
           Width="12">
          <Rectangle.RenderTransform>
             <TranslateTransform />
          </Rectangle.RenderTransform>
 </Rectangle>