How can I create a transparent WPF window?

Question

I got progress bar inside the MainWindow in WPF. Is possible to display only this control? I tried to set Window's visibility to hidden but it doesn't work (don't display anything).

And the second question: I set progress bar's border rounded, but when it's loading on first few percents the animation is outside the bar, how can I fix this?

Code:

<Window x:Class="WpfApp2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp2"
    mc:Ignorable="d"
    Title="MainWindow" Height="80" Width="800" Visibility="Visible"
    ContentRendered="Window_ContentRendered" WindowStyle="None">
<Window.Resources>
    <SolidColorBrush x:Key="ProgressBar.Progress" Color="#FF06B025"/>
    <SolidColorBrush x:Key="ProgressBar.Background" Color="#FFE6E6E6"/>
    <SolidColorBrush x:Key="ProgressBar.Border" Color="#FFBCBCBC"/>
    <Style x:Key="ProgressBarStyle1" TargetType="{x:Type ProgressBar}">
        <Setter Property="Foreground" Value="{StaticResource ProgressBar.Progress}"/>
        <Setter Property="Background" Value="{StaticResource ProgressBar.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ProgressBar.Border}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid x:Name="TemplateRoot">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="0*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0*"/>
                            <ColumnDefinition Width="0*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="0*"/>
                        </Grid.ColumnDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Determinate"/>
                                <VisualState x:Name="Indeterminate">
                                    <Storyboard RepeatBehavior="Forever">
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Animation">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.25"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.25"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="Animation">
                                            <EasingPointKeyFrame KeyTime="0" Value="-0.5,0.5"/>
                                            <EasingPointKeyFrame KeyTime="0:0:1" Value="0.5,0.5"/>
                                            <EasingPointKeyFrame KeyTime="0:0:2" Value="1.5,0.5"/>
                                        </PointAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="20" Grid.ColumnSpan="3" Grid.RowSpan="1"/>
                        <Rectangle x:Name="PART_Track" Grid.ColumnSpan="3" Grid.RowSpan="1"/>
                        <Grid x:Name="PART_Indicator" ClipToBounds="true" HorizontalAlignment="Left" Grid.RowSpan="1" Grid.ColumnSpan="3">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="16*"/>
                                <RowDefinition Height="33*"/>
                            </Grid.RowDefinitions>
                            <Rectangle x:Name="Indicator" Fill="{TemplateBinding Foreground}" RadiusX="20" RadiusY="20" Grid.RowSpan="2"/>
                            <Rectangle x:Name="Animation" Fill="{TemplateBinding Foreground}" RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2" RadiusX="20" RadiusY="20">
                                <Rectangle.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Rectangle.RenderTransform>
                            </Rectangle>
                        </Grid>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Orientation" Value="Vertical">
                            <Setter Property="LayoutTransform" TargetName="TemplateRoot">
                                <Setter.Value>
                                    <RotateTransform Angle="-90"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsIndeterminate" Value="true">
                            <Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <ProgressBar HorizontalAlignment="Left" Height="49" Margin="5,5,5,5" VerticalAlignment="Top" Width="772" Minimum="0" Maximum="100" Name="pbStatus" Style="{DynamicResource ProgressBarStyle1}"/>
</Grid>

Answer 1

I would animate the width and not scale the x axis as you are squashing the rectangle. At the same time I would keep the corner radius of the background and the progress bar the same.

Answer 2

Is possible to display only this control?

Try to set the following properties:

<Window ...
    Title="MainWindow"
    WindowStyle="None"
    AllowsTransparency="True"
    Background="Transparent"
    SizeToContent="WidthAndHeight">

As for your second question - please only ask one question per post - you could use the ClippingBorder class from here and put the track and the indicator inside it in the template:

<ControlTemplate TargetType="{x:Type ProgressBar}">
    <Grid x:Name="TemplateRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="0*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0*"/>
            <ColumnDefinition Width="0*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="0*"/>
        </Grid.ColumnDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Determinate"/>
                <VisualState x:Name="Indeterminate">
                    <Storyboard RepeatBehavior="Forever">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Animation">
                            <EasingDoubleKeyFrame KeyTime="0" Value="0.25"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.25"/>
                        </DoubleAnimationUsingKeyFrames>
                        <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="Animation">
                            <EasingPointKeyFrame KeyTime="0" Value="-0.5,0.5"/>
                            <EasingPointKeyFrame KeyTime="0:0:1" Value="0.5,0.5"/>
                            <EasingPointKeyFrame KeyTime="0:0:2" Value="1.5,0.5"/>
                        </PointAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <local:ClippingBorder BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    Background="{TemplateBinding Background}"
                                    CornerRadius="20" Grid.ColumnSpan="3" Grid.RowSpan="1">
            <Grid>
                <Rectangle x:Name="PART_Track" Grid.ColumnSpan="3" Grid.RowSpan="1"/>
                <Grid x:Name="PART_Indicator" HorizontalAlignment="Left" Grid.RowSpan="1" Grid.ColumnSpan="3">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="16*"/>
                        <RowDefinition Height="33*"/>
                    </Grid.RowDefinitions>
                    <Rectangle x:Name="Indicator" Fill="{TemplateBinding Foreground}" RadiusX="20" RadiusY="20" Grid.RowSpan="2"/>
                    <Rectangle x:Name="Animation" Fill="{TemplateBinding Foreground}" RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2" RadiusX="20" RadiusY="20">
                        <Rectangle.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </Rectangle.RenderTransform>
                    </Rectangle>
                </Grid>
            </Grid>
        </local:ClippingBorder>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="Orientation" Value="Vertical">
            <Setter Property="LayoutTransform" TargetName="TemplateRoot">
                <Setter.Value>
                    <RotateTransform Angle="-90"/>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="IsIndeterminate" Value="true">
            <Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Answer 3

<Window 
    Title="temp"  Height="400" Width="400" ResizeMode="NoResize" AllowsTransparency="True" WindowStyle="None" ShowInTaskbar="False" WindowStartupLocation="CenterScreen" Background="Transparent" BorderThickness="0">
<Grid>
    <ProgressBar/>
</Grid>
</Window>