c# - 如何更改 Windows Phone 中 slider 控件的高度？

Question

它一定很简单，但我想不通。如何更改Windows Phone 中 slider 控件的高度？无论我为 Height 设置多大的值，它都保持原样

<Slider Width="100" Height="600" />

Answer 1

在 Expression Blend 中打开页面

1. 右键单击页面上的 slider 控件。
2. 选择编辑模板，然后根据需要选择编辑当前/编辑副本。
3. 在 Render 选项卡的 Scale 子选项卡中更改 Expression Blend 中属性 Horizo​​ntalTrack、Horizo​​ntalFill、Horizo​​ntalThumb 的宽度值 你会看到不同之处。

保存页面并返回到 Visual Studio，您的自定义模板将添加到页面资源中。

我附上了 Expression Blend 的图像。

结果会是这样

模板代码:- 这可能对您有所帮助。

<phone:PhoneApplicationPage.Resources>
    <ControlTemplate x:Key="PhoneSimpleRepeatButton" TargetType="RepeatButton">
        <Rectangle Fill="Transparent"/>
    </ControlTemplate>
<Style x:Key="SliderStyle1" TargetType="Slider">

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Slider">
                <Grid Background="Transparent">
                    <Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="12"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Rectangle x:Name="HorizontalFill" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <CompositeTransform ScaleY="2.9"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Rectangle x:Name="HorizontalTrack" Grid.Column="2" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <CompositeTransform ScaleY="2.9"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
                        <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
                        <Thumb x:Name="HorizontalThumb" Grid.Column="1" Height="12" Margin="0,22,0,50" Width="12" RenderTransformOrigin="0.5,0.5">
                            <Thumb.RenderTransform>
                                <CompositeTransform ScaleY="4.65"/>
                            </Thumb.RenderTransform>
                            <Thumb.Template>
                                <ControlTemplate>
                                    <Canvas Background="{StaticResource PhoneForegroundBrush}" Height="12" Width="12">
                                        <Rectangle Fill="Transparent" Height="84" IsHitTestVisible="True" Canvas.Left="-24" Canvas.Top="-22" Width="60"/>
                                    </Canvas>
                                </ControlTemplate>
                            </Thumb.Template>
                        </Thumb>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

并在控制中使用它:-

 <Slider Margin="0,49,56,348" HorizontalAlignment="Right" Width="360" Style="{StaticResource SliderStyle1}" />