Question

我有一个具有以下UI的通用Windows应用程序：

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

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

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

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

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

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

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

2 个答案: