首页 > 编程语言> > c# – UWP – 以编程方式显示ItemTemplate中的进度条

c# – UWP – 以编程方式显示ItemTemplate中的进度条

2019-06-27 17:05:05 作者：互联网

我正在为Windows Mobile构建一个UWP应用程序,但我对进度条有点麻烦.我在应用程序启动的第一页上有一个工作,这很好,但现在我正在尝试在GridView中显示一个.我一次会在屏幕上有N个GridView控件,并希望在每个控件中显示一个ProgressBar.

这适用于数据绑定和数据将显示,但当我尝试在TextBlock之前添加不确定的ProgressBar它似乎没有显示.我只能假设我要么把它放在错误的地方,要么我做错了,因为我的GridView正在使用GridView.ItemTemplate.

以下是一些截图：

Without data in the collection

With data in the collection

用答案更新

在贾斯汀XL的帮助下,我成功地解决了问题的根源.我绑定到普通的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;
    }
}

解决方法:

如果您想要一个位于GridView中心的ProgressBar,您需要将GridView包装在Grid中,并将ProgressBar放在GridView的顶部.像这样的东西 –

<Grid>
    <GridView />

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

当然,您只想在加载数据时显示它正在进行中,因此您需要一个实现INotifyPropertyChanged的IsLoading属性,然后将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}" />

标签：c,xaml,gridview,uwp,uwp-xaml
来源： https://codeday.me/bug/20190627/1306788.html