c# - Windows Phone でスライダー コントロールの高さを変更するにはどうすればよいですか?

Question

それは単純なはずですが、私には理解できません。Windows Phone のスライダー コントロールの高さを変更するにはどうすればよいですか? いくら大きな値を設定しHeightてもそのまま

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

Answer 1

Expression Blend でページを開く

1. Page の Slider Control を右クリックします。
2. [テンプレートの編集] を選択し、必要に応じて [現在の編集/コピーの編集] を選択します。
3. Expression Blend のプロパティHorizo ​​ntalTrack、Horizo​​ntalFill、Horizo​​ntalThumb の Render タブの Scale サブタブで幅の値を変更すると、違いがわかります。

ページを保存して 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}" />