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

Question

I have a Universal Windows App with a UI like this:

• A vertical grid defining an number of rows
• Each row is a horizontal grid with a number of columns

I'd like each row to have a progress bar in its background as shown in this mockup:

I tried using a ProgressBar control with the Grid.ColSpan property set, but the progress bar is drawn above the text and buttons so that won't work.

My next idea was to use a Rectangle with a percentage width, but I don't think it's possible to specify a relative width.

My current idea is to implement a custom Brush that I can then set as Background property for each horizontal Grid, but I could not figure out how to do custom drawing inside my Brush implementation.

Sample 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

Two solutions here: reorder your XAML and put your ProgressBar directly after your background definition and before your buttons. This will cause it to be drawn under the buttons (As XAML draws in the order it finds things in XAML files by default, so reordering the XAML results in things being drawn in different orders)

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

Another solution is to set the Canvas.ZIndex attached property on the ProgressBar to -1.

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

which will cause it to be drawn under the rest of the Grid's content, which be default will have a ZIndex of 0.

Answer 2

i don't know what you done , but what is the problem in getting this type of Design

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