c# - UWP - 以编程方式在 ItemTemplate 中显示进度条

Question

我正在为 Windows Mobile 构建一个 UWP 应用程序，但我在进度条方面遇到了一些障碍。我在应用程序启动的第一页上有一个工作，这很好，但现在我试图在 GridView 中显示一个。我将在任何时候在屏幕上显示 N 个 GridView 控件，并希望在每个控件中显示一个 ProgressBar。

这适用于数据绑定(bind)并且数据会显示，但是当我尝试在 TextBlock 之前添加一个不确定的 ProgressBar 时它似乎没有显示。我只能假设我要么把它放在错误的地方，要么我做错了，因为我的 GridView 使用的是 GridView.ItemTemplate。

下面是一些截图:

Without data in the collection

With data in the collection

用答案更新

在 Justin XL 的帮助下，我设法弄清了问题的根源。我绑定(bind)到一个普通的 clr 属性而不是 DependencyProperty。我更改了我的代码以使用 MVVM 并设置 IsLoaded 属性来处理通知 UI。这是我更新后的工作代码:

ViewModel.cs

public class ViewModel
{
    public string Name { get; set; }
}

MainPageViewModel.cs

public class MainPageViewModel : INotifyPropertyChanged
{
    public ObservableCollection<ViewModel> MyData { get; set; } = new ObservableCollection<ViewModel>();

    private bool _isLoaded;

    public bool IsLoaded
    {
        get { return _isLoaded; }
        set
        {
            _isLoaded = value;
            OnPropertyChanged();
        }
    }

    public async Task GetDataAsync()
    {
        // Add items to MyData
        IsLoaded = true;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

MainPage.xaml.cs

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        InitializeComponent();
        DataContext = new MainPageViewModel();
    }

    public MainPageViewModel Vm => DataContext as MainPageViewModel;

    protected override async void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);

        await Vm.GetDataAsync();
    }
}

MainPage.xaml

<Page
    x:Class="MultiGridProgressBars.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MultiGridProgressBars"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:MultiGridProgressBars.Models"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <GridView IsHitTestVisible="{x:Bind Vm.IsLoaded, Mode=OneWay}"
            Header="A Grid View"
            HorizontalAlignment="Left"
            x:Name="MyDataListView1"
            ItemsSource="{x:Bind Vm.MyData}"
            Width="164" 
            Margin="10,53,0,53">
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="models:ViewModel">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" HorizontalAlignment="Stretch" TextWrapping="WrapWholeWords">
                            <Run Text="{ x:Bind Name }"></Run>
                        </TextBlock>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="Margin" Value="0 0 0 10"></Setter>
                    <Setter Property="BorderThickness" Value="1"></Setter>
                    <Setter Property="BorderBrush" Value="Blue"></Setter>
                    <Setter Property="Padding" Value="5"></Setter>
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                    <Setter Property="VerticalAlignment" Value="Stretch"/>
                    <Setter Property="Width" Value="150"></Setter>
                    <Setter Property="Height" Value="80"></Setter>
                </Style>
            </GridView.ItemContainerStyle>
        </GridView>
    </Grid>
</Page>

App.xaml

<Application
        x:Class="MultiGridProgressBars.App"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:MultiGridProgressBars"
        xmlns:converters="using:MultiGridProgressBars.Converters"
        RequestedTheme="Light">

    <Application.Resources>
        <converters:InvertIsCheckedVisiblityConverter x:Key="InvertIsCheckedVisiblityConverter" />
        <Style TargetType="GridView">
            <Setter Property="Padding" Value="0,0,0,10" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="TabNavigation" Value="Once" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
            <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
            <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" />
            <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" />
            <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
            <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
            <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
            <Setter Property="IsSwipeEnabled" Value="True" />
            <Setter Property="ItemContainerTransitions">
                <Setter.Value>
                    <TransitionCollection>
                        <AddDeleteThemeTransition />
                        <ContentThemeTransition />
                        <ReorderThemeTransition />
                        <EntranceThemeTransition IsStaggeringEnabled="False" />
                    </TransitionCollection>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridView">
                        <Grid BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}">
                            <ScrollViewer x:Name="ScrollViewer"
                                            AutomationProperties.AccessibilityView="Raw"
                                            BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                            HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                            HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                            IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                            IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                                            IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                            IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                            IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                            TabNavigation="{TemplateBinding TabNavigation}"
                                            VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                            VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                            ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                <ItemsPresenter FooterTransitions="{TemplateBinding FooterTransitions}"
                                                FooterTemplate="{TemplateBinding FooterTemplate}"
                                                Footer="{TemplateBinding Footer}"
                                                HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                                Header="{TemplateBinding Header}"
                                                HeaderTransitions="{TemplateBinding HeaderTransitions}"
                                                Padding="{TemplateBinding Padding}" />
                            </ScrollViewer>

                            <ProgressBar x:Name="StatusBar"
                                             Visibility="{Binding IsHitTestVisible, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InvertIsCheckedVisiblityConverter}}"
                                             IsIndeterminate="True" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

InvertIsCheckedVisiblityConverter.cs

public class InvertIsCheckedVisiblityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        bool isChecked = (bool) value;
        return isChecked ? Visibility.Collapsed : Visibility.Visible;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return null;
    }
}

Answer 1

如果你想要一个位于 GridView 中心的 ProgressBar，你需要将你的 GridView 包裹在一个 Grid 中 并将 ProgressBar 放在 GridView 的顶部。像这样的 -

<Grid>
    <GridView />

    <ProgressBar x:Name="StatusBar"
                 IsIndeterminate="True"></ProgressBar>
</Grid>

当然，您只想在加载数据时显示它的进度，因此您需要一个类似 IsLoading 的属性，它实现了 INotifyPropertyChanged，然后绑定(bind) IsIndeterminate 到它。

IsIndeterminate="{Binding IsLoading}"

---

更新

为了更简单，您还可以将 ProgressBar 包装在 GridView 样式中。首先在默认样式的基础上生成一个新样式，然后转到它的 ControlTemplate 并将根面板从 Border 更改为 Grid，然后然后在此处放置一个 ProgressBar，就像这样 -

<ControlTemplate TargetType="GridView">
    <Grid BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}"
          Background="{TemplateBinding Background}">
        <ScrollViewer x:Name="ScrollViewer"
                      AutomationProperties.AccessibilityView="Raw"
                      BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                      HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                      HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                      IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                      IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                      IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                      IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                      IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                      TabNavigation="{TemplateBinding TabNavigation}"
                      VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                      VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                      ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
            <ItemsPresenter FooterTransitions="{TemplateBinding FooterTransitions}"
                            FooterTemplate="{TemplateBinding FooterTemplate}"
                            Footer="{TemplateBinding Footer}"
                            HeaderTemplate="{TemplateBinding HeaderTemplate}"
                            Header="{TemplateBinding Header}"
                            HeaderTransitions="{TemplateBinding HeaderTransitions}"
                            Padding="{TemplateBinding Padding}" />
        </ScrollViewer>

        <ProgressBar x:Name="StatusBar"
                     IsIndeterminate="{Binding IsHitTestVisible, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InvertBoolConverter}}" />
    </Grid>
</ControlTemplate>

您还需要一个 bool 属性来控制 ProgressBar 的加载。在这里我们可以只使用现有的属性 IsHitTestVisible。请注意，您还需要使用转换器反转值。

最后，您可以通过执行此操作直接操作加载视觉效果 -

<GridView IsHitTestVisible="{Binding IsLoaded}" Style="{StaticResource LoadingGridViewStyle}" />