WPF不確定な丸いエッジ、インジケータオーバーラップ親

Question

Good Evening Guys、WPFアプリケーションを初めて使用しています。 Indeterminateプログレスバーのデザインに問題があります。私はプログレスバー関連のトピックをオンラインでたくさん調べていましたが、まだプログレスバーのスタイリングコンセプトについてはっきりしていません。

コーナーの半径（PART_Indicator、PART_Track、インジケータ、アニメーション）に影響を与えた可能性のある要素すべてに対して、クリップの境界線の値を変更してtrueに設定しようとしましたが、まだこれで不運です。

子ボーダーは、常に親と重なります。私は以下のように示すプログレスバーに達成したい何

次のように示されます。以下は

私のコードです：

<Window x:Class="MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="350" Width="150"> 
    <Grid> 
     <StackPanel Orientation="Vertical"> 
      <ProgressBar Height="36" Name="progBar" VerticalAlignment="Top" IsIndeterminate="True" Foreground="Orange" BorderBrush="Gray" BorderThickness="1" > 
       <ProgressBar.Style> 
        <Style TargetType="{x:Type ProgressBar}"> 
         <Setter Property="Template"> 
          <Setter.Value> 
           <ControlTemplate TargetType="ProgressBar" > 
            <Grid Name="TemplateRoot" SnapsToDevicePixels="True"> 
             <Rectangle RadiusX="2" RadiusY="2" Fill="Transparent" /> 
             <Border CornerRadius="10" Margin="1,1,1,1"> 
              <Border.Background> 
               <SolidColorBrush Color="Transparent"/> 
              </Border.Background> 
             </Border> 
             <Border BorderThickness="1" BorderBrush="gray" Margin="1,1,1,1" CornerRadius="10"> 
              <Border.Background> 
               <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
                <GradientStop Color="White" Offset="0.0" /> 
                <GradientStop Color="WhiteSmoke" Offset="1" /> 
               </LinearGradientBrush> 
              </Border.Background> 
             </Border> 
             <Rectangle Name="PART_Track" Margin="1,1,1,1" ClipToBounds="True"/> 
             <Decorator Name="PART_Indicator" Margin="3,2,3,2" HorizontalAlignment="Left" ClipToBounds="True"> 
              <Grid Name="Foreground" ClipToBounds="True"> 
               <Rectangle RadiusX="10" RadiusY="10" Name="Indicator" ClipToBounds="True"/> 
               <Grid Name="Animation" ClipToBounds="True"> 
                <Border Name="PART_GlowRect" Width="50" Margin="1" HorizontalAlignment="Left" Background="Orange" CornerRadius="10" /> 
               </Grid> 
               <Grid Name="Overlay"> 
               </Grid> 
              </Grid> 
             </Decorator> 
             <Border BorderThickness="0" CornerRadius="0" BorderBrush="Transparent" /> 
            </Grid> 
           </ControlTemplate> 
          </Setter.Value> 
         </Setter> 
        </Style> 
       </ProgressBar.Style> 
      </ProgressBar> 
     </StackPanel> 

    </Grid> 
</Window> 

私はコードの間違っていたましたか？この問題について私に案内してください。

ありがとうございます。

Answer 1

チェックアウトClipプロパティ：あなたはClipプロパティ内の任意の形状を置くことができる

<Image 
    Source="sampleImages\Waterlilies.jpg" 
    Width="200" Height="150" HorizontalAlignment="Left"> 
    <Image.Clip> 
    <EllipseGeometry 
     RadiusX="100" 
     RadiusY="75" 
     Center="100,75"/> 
    </Image.Clip> 
</Image> 

。あなたの場合、それはRectangleGeometryとRadiusXとRadiusYのプロパティが設定されています。

さらに詳しい情報：Mikolaytisの答えのためのhttps://msdn.microsoft.com/ru-ru/library/system.windows.uielement.clip(v=vs.110).aspx

Answer 2

おかげで、私は現在、RectangleGeometryをを使用しています。

RectangleGeometryのRectは、親の幅から幅を継承しないと思うので、別の解像度のrectを再計算するためにコードを使用する必要があります。

私の場合と同じ問題に直面している場合、以下のコードを共有しています。

<Window x:Class="MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="350" Width="400"> 
    <ProgressBar Height="36" Width="358" Name="progBar" VerticalAlignment="Top" IsIndeterminate="True" Foreground="Orange" BorderBrush="Gray" BorderThickness="1" > 
     <ProgressBar.Style> 
      <Style TargetType="{x:Type ProgressBar}"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="ProgressBar" > 
          <Grid Name="TemplateRoot" SnapsToDevicePixels="True"> 
           <Rectangle RadiusX="2" RadiusY="2" Fill="Transparent" /> 
           <Border CornerRadius="10" Margin="1,1,1,1"> 
            <Border.Background> 
             <SolidColorBrush Color="Transparent"/> 
            </Border.Background> 
           </Border> 
           <Border BorderThickness="1" BorderBrush="Blue" Margin="1,1,1,1" CornerRadius="10"> 
            <Border.Background> 
             <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
              <GradientStop Color="Red" Offset="0.0" /> 
              <GradientStop Color="Red" Offset="1" /> 
             </LinearGradientBrush> 
            </Border.Background> 
           </Border> 
           <Rectangle Name="PART_Track" Margin="0" ClipToBounds="True" /> 
           <Border Background="black" Name="PART_Indicator" Margin="0" HorizontalAlignment="Left" ClipToBounds="True"> 
            <Border.Clip> 
             <RectangleGeometry Rect="2,2,354,32" RadiusX="9" RadiusY="9.5" /> 
            </Border.Clip> 
            <Grid Name="Foreground"> 
             <Rectangle RadiusX="10" RadiusY="10" Name="Indicator" ClipToBounds="True"/> 
             <Grid Name="Animation" ClipToBounds="True"> 
              <Border Name="PART_GlowRect" Width="50" Margin="1" HorizontalAlignment="Left" Background="Orange" CornerRadius="10" /> 
             </Grid> 
             <Grid Name="Overlay"> 
             </Grid> 
            </Grid> 
           </Border> 
           <Border BorderThickness="0" CornerRadius="0" BorderBrush="Transparent" /> 
          </Grid> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </ProgressBar.Style> 
    </ProgressBar> 
</Window>