【问题标题】:How can I create a transparent WPF window?如何创建透明的 WPF 窗口?
【发布时间】:2019-10-11 21:22:53
【问题描述】:

我在 WPF 的 MainWindow 中看到了进度条。可以只显示这个控件吗?我尝试将 Window 的可见性设置为隐藏,但它不起作用(不显示任何内容)。

还有第二个问题: 我将进度条的边框设置为圆形,但是当它加载前几个百分比时,动画在进度条之外,我该如何解决这个问题?

代码:

<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>

【问题讨论】:

  • 也许这个问题应该改写为How can I create a transparent WPF window?
  • 问题已更改,谢谢
  • @UweKeim - 你有什么理由保留c# 标签?

标签: wpf


【解决方案1】:

可以只显示这个控件吗?

尝试设置以下属性:

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

至于您的第二个问题 - 每个帖子只问一个问题 - 您可以使用 here 中的 ClippingBorder 类并将轨道和指示器放入模板中:

<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>

【讨论】:

    【解决方案2】:
    <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>
    

    【讨论】:

      【解决方案3】:

      当您挤压矩形时,我会为宽度设置动画而不是缩放 x 轴。 同时我会保持背景的圆角半径和进度条相同。

      【讨论】:

        猜你喜欢
        • 2021-04-15
        • 2010-10-21
        • 2021-06-24
        • 2018-08-12
        • 1970-01-01
        • 1970-01-01
        • 2021-09-17
        • 2010-10-20
        相关资源
        最近更新 更多