Untitled

 avatar
unknown
plain_text
2 years ago
2.3 kB
3
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">
    <Window.Resources>
        <Style x:Key="CircularProgressBarStyle" TargetType="{x:Type ProgressBar}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid>
                            <!-- Outer Circle -->
                            <Ellipse Width="200" Height="200" Stroke="LightGray" StrokeThickness="5" />

                            <!-- Inner Circle -->
                            <Ellipse Width="200" Height="200" Stroke="DeepSkyBlue" StrokeThickness="5" ClipToBounds="True">
                                <Ellipse.RenderTransform>
                                    <ScaleTransform ScaleX="1" ScaleY="1" CenterX="0.5" CenterY="0.5"/>
                                </Ellipse.RenderTransform>
                                <Ellipse.Triggers>
                                    <EventTrigger RoutedEvent="Loaded">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="ScaleX" From="0" To="1" Duration="0:0:2"/>
                                                <DoubleAnimation Storyboard.TargetProperty="ScaleY" From="0" To="1" Duration="0:0:2"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Ellipse.Triggers>
                            </Ellipse>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid>
        <ProgressBar Style="{StaticResource CircularProgressBarStyle}" Value="50" Maximum="100" Width="150" Height="150" />

        <!-- Second Circular Progress Bar -->
        <ProgressBar Style="{StaticResource CircularProgressBarStyle}" Value="75" Maximum="100" Width="150" Height="150" />
    </Grid>
</Window>
Editor is loading...