UWP XAML: пользовательская кисть для рисования индикатора выполнения в качестве фона сетки - PullRequest
Новая
       31

UWP XAML: пользовательская кисть для рисования индикатора выполнения в качестве фона сетки

0 голосов
/ 27 июня 2018

У меня есть универсальное приложение для Windows с таким интерфейсом:

  • Вертикальная сетка, определяющая количество строк
  • Каждая строка представляет собой горизонтальную сетку с количеством столбцов

Мне бы хотелось, чтобы в каждой строке был индикатор выполнения, как показано на этом макете:

Mockup

Я пытался использовать элемент управления 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>

Ответы [ 2 ]

0 голосов
/ 01 июля 2018

я не знаю, что вы сделали, но в чем проблема получения этого типа дизайна 

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

Screenshot

0 голосов
/ 27 июня 2018

Здесь есть два решения: изменить порядок 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>

Другое решение - установить для присоединенного свойства Canvas.ZIndex на ProgressBar значение -1. ​​

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

, что приведет к его прорисовке под остальным содержимым сетки, значение по умолчанию будет ZIndex = 0.

...