Question

我的应用中有不同的DataTemplate s，对应不同的VisualStates并在页面中显示数据。

以下是MainPage.xaml页面：

<Page.Resources>
    <DataTemplate x:Key="CustomListItemTemplate"
                  x:DataType="data:ItemsClass">
        <UserControl>
            <RelativePanel>
                <Image Name="itemImage"
                       Stretch="UniformToFill"
                       Source="{x:Bind ItemImage, Mode=OneWay}"/>
                <TextBlock Name="itemTitle"
                           TextTrimming="CharacterEllipsis"
                           Text="{x:Bind ItemName, Mode=OneWay}"/>
                <TextBlock Name="itemSpecies"
                           FontStyle="Italic"
                           TextTrimming="CharacterEllipsis"
                           Text="{x:Bind SpeciesName, Mode=OneWay}"/>

                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState>
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="0"/>
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="itemImage.Width"
                                        Value="60"/>
                                <Setter Target="itemImage.Height"
                                        Value="60"/>
                                <Setter Target="itemImage.(RelativePanel.AlignLeftWithPanel)"
                                        Value="True"/>

                                <Setter Target="itemTitle.(RelativePanel.RightOf)"
                                        Value="itemImage"/>
                                <Setter Target="itemTitle.Margin"
                                        Value="10,0"/>
                                <Setter Target="itemTitle.Style"
                                        Value="{StaticResource BaseTextBlockStyle}"/>

                                <Setter Target="itemSpecies.(RelativePanel.RightOf)"
                                        Value="itemImage"/>
                                <Setter Target="itemSpecies.Margin"
                                        Value="10,5"/>
                                <Setter Target="itemSpecies.(RelativePanel.Below)"
                                        Value="itemTitle"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </RelativePanel>
        </UserControl>
    </DataTemplate>

    <DataTemplate x:Key="ListviewGroupHeader">
        <UserControl>
            <TextBlock Text="{Binding Key}"
                       TextTrimming="Clip"/>
        </UserControl>
    </DataTemplate>

    <CollectionViewSource x:Key="GroupedItemsCollection"
                          x:Name="GroupedItemsCollection"
                          IsSourceGrouped="True"/>

    <DataTemplate x:Key="CustomGridItemTemplate"
                  x:DataType="data:ItemsClass">
        <UserControl>
            <StackPanel Margin="10">
                <Image Height="200"
                       Width="200"
                       Stretch="UniformToFill"
                       Margin="5"
                       Source="{x:Bind ItemImage, Mode=OneWay}"/>
                <TextBlock Text="{x:Bind ItemName, Mode=OneWay}"
                           TextTrimming="CharacterEllipsis"
                           Style="{StaticResource TitleTextBlockStyle}"/>
                <TextBlock Text="{x:Bind SpeciesName, Mode=OneWay}"
                           TextTrimming="CharacterEllipsis"
                           Style="{StaticResource BaseTextBlockStyle}"
                           FontStyle="Italic"/>
            </StackPanel>
        </UserControl>
    </DataTemplate>

    <DataTemplate x:Key="ZoomedOutTemplate"
                  x:DataType="data:ItemsClass">
        <UserControl>
            <TextBlock Text="{x:Bind GroupName}"
                       TextTrimming="CharacterEllipsis"/>
        </UserControl>
    </DataTemplate>

    <DataTemplate x:Key="CustomSwitchableGridTemplate">
        <UserControl>
            <SemanticZoom HorizontalAlignment="Stretch">
                <SemanticZoom.ZoomedOutView>
                    <ListView ItemsSource="{Binding Source={StaticResource GroupedItemsCollection}}"
                              ItemTemplate="{StaticResource ZoomedOutTemplate}"/>
                </SemanticZoom.ZoomedOutView>
                <SemanticZoom.ZoomedInView>
                    <GridView ItemsSource="{Binding Source={StaticResource GroupedItemsCollection}}"
                              ItemTemplate="{StaticResource CustomGridItemTemplate}"
                              SelectionMode="None"
                              IsItemClickEnabled="True"
                              HorizontalContentAlignment="Center">
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsWrapGrid HorizontalAlignment="Center"
                                               Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.GroupStyle>
                            <GroupStyle HeaderTemplate="{StaticResource ListviewGroupHeader}"/>
                        </GridView.GroupStyle>
                    </GridView>
                </SemanticZoom.ZoomedInView>
            </SemanticZoom>
        </UserControl>
    </DataTemplate>




    <DataTemplate x:Key="CustomSwitchableListTemplate">
        <UserControl>
            <SemanticZoom>
                <SemanticZoom.ZoomedInView>
                    <ListView ItemsSource="{Binding Source={StaticResource GroupedItemsCollection}}"
                      ItemTemplate="{StaticResource CustomListItemTemplate}"
                      SelectionMode="None"
                      IsItemClickEnabled="True">
                        <ListView.GroupStyle>
                            <GroupStyle HeaderTemplate="{StaticResource ListviewGroupHeader}"/>
                        </ListView.GroupStyle>
                    </ListView>
                </SemanticZoom.ZoomedInView>
                <SemanticZoom.ZoomedOutView>
                    <ListView ItemsSource="{Binding Source={StaticResource GroupedItemsCollection}}"
                          ItemTemplate="{StaticResource ZoomedOutTemplate}">
                    </ListView>
                </SemanticZoom.ZoomedOutView>
            </SemanticZoom>
        </UserControl>
    </DataTemplate>


</Page.Resources>

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="PivotContent.ContentTemplate"
                            Value="{StaticResource ResourceKey=CustomSwitchableListTemplate}"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="550"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="PivotContent.ContentTemplate"
                            Value="{StaticResource ResourceKey=CustomSwitchableGridTemplate}"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.Background>
        <ImageBrush Opacity="0.5"
                    x:Name="BackgroundBrush"/>
    </Grid.Background>

    <Pivot>
        <PivotItem>
            <PivotItem.Header>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Vegetables &amp; Fruits"
                               VerticalAlignment="Center"
                               Margin="5"/>
                    <Image Source="ms-appx:///Assets/fruits.png"
                           Height="40"/>
                </StackPanel>
            </PivotItem.Header>

            <PivotItem.Content>
                <ContentPresenter Name="PivotContent"
                                  HorizontalAlignment="Stretch"/>
            </PivotItem.Content>
        </PivotItem>
    </Pivot>
</Grid>

数据来自ItemsClass和DataHelper类：

public class ItemsClass : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChnaged([CallerMemberName] string property = "")
    {
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));
    }

    public string ItemName;
    public string SpeciesName;
    public BitmapImage ItemImage;
    public string ItemDescription;
    public string GroupName;
    public string ItemSpecies;

}
public class DataHelper
{

    // LeafyDisplayItems is a long list of data which I can't show here

    public static Task<ObservableCollection<ItemsClass>> GetItems()
    {
        var collection = new ObservableCollection<ItemsClass>();
        foreach (var item in LeafyDisplayItems)
        {
            if (item.ContainsKey("title"))
            {
                item.TryGetValue("title", out string title);
                item.TryGetValue("species", out string species);
                item.TryGetValue("image", out string image);
                collection.Add(new ItemsClass()
                {
                    ItemName = title,
                    //ItemImage = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:" + image)),
                    SpeciesName = species,
                    GroupName = "Leafy and Salad Vegetables"
                });
                collection.Add(new ItemsClass()
                {
                    ItemName = title,
                    GroupName = "Group 2"
                });
                collection.Add(new ItemsClass()
                {
                    ItemName = title,
                    GroupName = "Group 3"
                });
                collection.Add(new ItemsClass()
                {
                    ItemName = title,
                    GroupName = "Group 4"
                });
            }
        }
        return Task.FromResult(collection);
    }
}

在MainPage.xaml.cs中：

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        DataContext = Helpers.INotifyClass.INotifyObj;
        GetItems();
    }

    private async void GetItems()
    {
        Helpers.INotifyClass.INotifyObj.VegetablesList = await Helpers.DataHelper.GetItems();
        var groups = from g in Helpers.INotifyClass.INotifyObj.VegetablesList group g by g.GroupName;
        GroupedItemsCollection.Source = groups;
    }

}

我在我的应用中获得了以下观点：

[图片1]： [图片2]：

如您所见，zoomed out view显示组，但组基本上都是数据，除了数据中的名称是组＆＃39;名。我似乎无法弄明白，我怎么才能只显示小组＆＃39;在zoomed out view中命名数据。如果有人可以帮我解决这个问题，请提供您的建议。如果还有其他方法，我愿意接受建议。

注意：我已经看过Microsoft的UWP示例，但我无法将x:Bind放在DataTemplate中，因为它要求模板中的DataType。

SemanticZoom中的ZoomedOutView无法正常工作

0 个答案: