UWP XAML：“自定义画笔”将进度条绘制为网格背景

Question

我有一个通用Windows应用程序，其用户界面如下所示：

• 垂直网格定义行数
• 每行是一个水平网格，其中包含许多列

我希望每一行在其背景中都有一个进度条，如下图所示：

我尝试使用带有Grid.ColSpan属性集的ProgressBar控件，但是进度栏绘制在文本和按钮上方 ，因此无法使用。

我的下一个想法是使用具有一定百分比宽度的Rectangle，但我认为不可能指定相对宽度。

我目前的想法是实现一个自定义Brush ，然后可以将其设置为每个水平Grid的Background属性，但是我不知道如何在我的Brush实施中进行自定义绘制。

示例XAML：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <Grid.Background>
        <MyCustomBrush RelativeWidth="75%"/> ???
    </Grid.Background>

    <Button Content="{x:Bind ToggleSymbol, Mode=OneWay}" Grid.Column="0"></Button>

    <Button Grid.Column="1" Content="Title"></Button>

    <TextBlock Text="SubTitle" Margin="0,0,10,0" Grid.Column="3"></TextBlock>

    <ProgressBar Visibility="Collapsed" Grid.Column="0" Grid.ColumnSpan="5" Value="75" Maximum="100" Background="Transparent" Foreground="Red"></ProgressBar>
</Grid>

Answer 1

这里有两个解决方案：对XAML进行重新排序，并将ProgressBar直接放在背景定义之后和按钮之前。 这将导致它被绘制在按钮下（因为XAML按照默认顺序在XAML文件中查找事物的顺序绘制，因此重新排序XAML会导致事物以不同的顺序绘制）

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <Grid.Background>
        <MyCustomBrush RelativeWidth="75%"/> ???
    </Grid.Background>

    <ProgressBar Visibility="Collapsed" Grid.Column="0" Grid.ColumnSpan="5" Value="75" Maximum="100" Background="Transparent" Foreground="Red" />

    <Button Content="{x:Bind ToggleSymbol, Mode=OneWay}" Grid.Column="0"></Button>

    <Button Grid.Column="1" Content="Title"></Button>

    <TextBlock Text="SubTitle" Margin="0,0,10,0" Grid.Column="3"></TextBlock>
</Grid>

另一种解决方案是将ProgressBar上的Canvas.ZIndex附加属性设置为-1。

<ProgressBar Canvas.ZIndex="-1" .... ></ProgressBar>

这将导致它在网格的其余内容下绘制，默认情况下ZIndex为0。

Answer 2

我不知道您做了什么，但是获得这种类型的设计有什么问题

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="100" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>

    <ProgressBar BorderBrush="Transparent" BorderThickness="2" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" VerticalAlignment="Stretch" Background="Transparent" Foreground="LightCoral" Minimum="0" Maximum="10" Value="7" />
    <TextBlock Grid.Column="0" Grid.Row="0" Text="▶ Title" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="50"/>
    <TextBlock Grid.Column="3" Grid.Row="0" Text="▶ SubTitle" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="50"/>

    <ProgressBar BorderBrush="Transparent" BorderThickness="2" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" VerticalAlignment="Stretch" Background="Transparent" Foreground="LightCoral" Minimum="0" Maximum="10" Value="5" />
    <TextBlock Grid.Column="0" Grid.Row="1" Text="▶ Title" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="50"/>
    <TextBlock Grid.Column="3" Grid.Row="1" Text="▶ SubTitle" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="50"/>

    <ProgressBar BorderBrush="Transparent" BorderThickness="2" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" VerticalAlignment="Stretch" Background="Transparent" Foreground="LightCoral" Minimum="0" Maximum="10" Value="8" />
    <TextBlock Grid.Column="0" Grid.Row="2" Text="▶ Title" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="50"/>
    <TextBlock Grid.Column="3" Grid.Row="2" Text="▶ SubTitle" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="50"/>

</Grid>