Question

一定很简单，但我无法弄清楚。如何在Windows Phone中更改滑块控件的高度？无论我为Height设置多大的价值，它仍然保持原样

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

enter image description here

Answer 1

在Expression Blend中打开页面

右键单击页面上的滑块控件。
选择编辑模板，然后根据需要选择编辑当前/编辑副本。
在“渲染”选项卡的“缩放”子选项卡中更改Expression Blend中属性 HorizontalTrack，HorizontalFill，HorizontalThumb 的宽度值你会看到差异。

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

我已附加Expression Blend的图像。

enter image description here

结果就像

enter image description here

模板代码： - 这对你有帮助。

<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}" />

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

1 个答案: