Untitled

 avatar
unknown
plain_text
2 years ago
4.9 kB
4
Indexable
<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Two Circular Progress Bars" Height="300" Width="300">
    <Grid>
        <!-- Outer Circle -->
        <Canvas Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Ellipse Width="200" Height="200" Stroke="LightGray" StrokeThickness="5" />
        </Canvas>

        <!-- Inner Circle (Progress Bar) -->
        <Canvas Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Ellipse Width="200" Height="200" Stroke="DeepSkyBlue" StrokeThickness="5">
                <Ellipse.Clip>
                    <RectangleGeometry Rect="0,0,200,200">
                        <RectangleGeometry.RadiusX>
                            <Binding ElementName="innerCircle" Path="Width" Converter="{StaticResource RadiusConverter}" />
                        </RectangleGeometry.RadiusX>
                        <RectangleGeometry.RadiusY>
                            <Binding ElementName="innerCircle" Path="Height" Converter="{StaticResource RadiusConverter}" />
                        </RectangleGeometry.RadiusY>
                    </RectangleGeometry>
                </Ellipse.Clip>
            </Ellipse>

            <!-- Progress Bar -->
            <ProgressBar Value="50" Maximum="100" Width="150" Height="150" Canvas.Left="25" Canvas.Top="25">
                <ProgressBar.Template>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid>
                            <Ellipse Width="150" Height="150" StrokeThickness="5">
                                <Ellipse.Fill>
                                    <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                                        <GradientStop Color="DeepSkyBlue" Offset="0" />
                                        <GradientStop Color="Transparent" Offset="1" />
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Border BorderBrush="DeepSkyBlue" BorderThickness="5"/>
                            <Border BorderBrush="DeepSkyBlue" BorderThickness="5" ClipToBounds="True">
                                <ContentPresenter x:Name="PART_Track" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </ProgressBar.Template>
            </ProgressBar>
        </Canvas>

        <!-- Second Circular Progress Bar -->
        <Canvas Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Ellipse Width="200" Height="200" Stroke="DeepSkyBlue" StrokeThickness="5">
                <Ellipse.Clip>
                    <RectangleGeometry Rect="0,0,200,200">
                        <RectangleGeometry.RadiusX>
                            <Binding ElementName="innerCircle" Path="Width" Converter="{StaticResource RadiusConverter}" />
                        </RectangleGeometry.RadiusX>
                        <RectangleGeometry.RadiusY>
                            <Binding ElementName="innerCircle" Path="Height" Converter="{StaticResource RadiusConverter}" />
                        </RectangleGeometry.RadiusY>
                    </RectangleGeometry>
                </Ellipse.Clip>
            </Ellipse>

            <!-- Progress Bar -->
            <ProgressBar Value="75" Maximum="100" Width="150" Height="150" Canvas.Left="25" Canvas.Top="25">
                <ProgressBar.Template>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid>
                            <Ellipse Width="150" Height="150" StrokeThickness="5">
                                <Ellipse.Fill>
                                    <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                                        <GradientStop Color="DeepSkyBlue" Offset="0" />
                                        <GradientStop Color="Transparent" Offset="1" />
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Border BorderBrush="DeepSkyBlue" BorderThickness="5"/>
                            <Border BorderBrush="DeepSkyBlue" BorderThickness="5" ClipToBounds="True">
                                <ContentPresenter x:Name="PART_Track" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </ProgressBar.Template>
            </ProgressBar>
        </Canvas>
    </Grid>
</Window>
Editor is loading...