如何在Windows Phone中更改滑块控件的高度？

Question

它必须简单,但我无法弄清楚.如何在Windows Phone中更改滑块控件的高度？无论我为Height它设定多大的值,它仍然保持不变

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

Answer 1

在Expression Blend中打开页面

1. 右键单击页面上的滑块控件.
2. 选择编辑模板,然后根据需要选择编辑当前/编辑副本.
3. 在"渲染"选项卡的"缩放"子选项卡中为" 表达式混合"中的属性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}" />