c# - WPF コントロールのカスタム デザイン

Question

次の図のようなコントロールをいくつか作成する必要があります。

1)コードで動的に長さを変更できる水平バー。

「プログレスバー」コントロールを使用してみましたが、緑色のグロー効果も白い境界線も取り除くことができません:

2) 次のようなスライダー:

スライダーのすべての画像が個別にあることに注意してください。(「プラス」「マイナス」ボタンのある背景、親指など)

3) (ブレードの画像がある場合) のように、ブレードの量を動的に変更:

Answer 1

スライダー、進行状況バーのカスタム テンプレートを作成する必要があります。

MSDNには、標準の WPF コントロールのスタイルとテンプレートがあります。

次に、「ブレード」コントロールについては、新しいカスタム コントロールを作成する必要があると思いますRangeBase。

進行状況バーについては、次から始めることができます。

<ProgressBar VerticalAlignment="Top" Value="60" Maximum="100">
    <ProgressBar.Template>
        <ControlTemplate TargetType="{x:Type ProgressBar}" >
            <Grid Height="20">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="30"/>
                </Grid.ColumnDefinitions>

                <Grid x:Name="PART_Track" ClipToBounds="True">
                    <Rectangle x:Name="PART_Indicator" Margin="-7,0,0,0" HorizontalAlignment="Left" Fill="Green" RadiusX="7" RadiusY="7" Height="14"/>
                </Grid>

                <TextBlock Grid.Column="1" Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, StringFormat={}{0} %}" Foreground="Black" VerticalAlignment="Center"/>
            </Grid>
        </ControlTemplate>
    </ProgressBar.Template>
</ProgressBar>