c# - UWP XAML：自定义画笔以将进度条绘制为网格背景

Question

我有一个具有这样 UI 的通用 Windows 应用程序：

• 定义行数的垂直网格
• 每行是一个水平网格，有许多列

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

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

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

我目前的想法是实现一个自定义Brush，然后我可以将其设置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>

标签： c#xamluwpuwp-xamlbrush

Answer 1

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

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