none
semanticzoom的缩小视图中可否插入图像? RRS feed

  • 问题

  • 如题,在semanticzoom控件中,缩小视图是可以显示各个要组的标题,点击即可跳转到相应标题的位置。请问,如何在缩小视图中,也就是概括视图中显示各要组的标题的同时显示图片,增强美观性?我使用VS2013编译,本机运行windows8.1。可否给出详细的代码解释?谢谢!!!
    2014年2月17日 11:40

答案

  • Hi,

    当然可以显示标题的同时显示图片,这取决于你的ZoomOutView中的GridView的DataTemplate定义。

    你如果是参考这个链接:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh781234.aspx

    你可以发现的zoomOutView定义如下:

    <SemanticZoom.ZoomedOutView>
            <GridView Foreground="White"
                      ScrollViewer.IsHorizontalScrollChainingEnabled="False">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Group.Key}" 
                       FontFamily="Segoe UI" FontWeight="Light" FontSize="24" />
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid ItemWidth="75" ItemHeight="75" MaximumRowsOrColumns="2"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Margin" Value="4" />
                        <Setter Property="Padding" Value="10" />
                        <Setter Property="Background" Value="#FF25A1DB" />
                        <Setter Property="BorderThickness" Value="1" />
                        <Setter Property="HorizontalContentAlignment" Value="Left" />
                        <Setter Property="VerticalContentAlignment" Value="Bottom" />
                    </Style>
                </GridView.ItemContainerStyle>
            </GridView>
        </SemanticZoom.ZoomedOutView>
    

    你可以发现它里面的Gridview的DataTemplate只是定义了一个TextBlock所以当然只能显示标题了,如果你要显示图片你可以改为如下:

     <SemanticZoom.ZoomedOutView>
                    <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock
                                    Text="{Binding Group.Key}"
                                    FontFamily="Segoe UI Light"
                                    />
                                    <Image Source="{Binding Group.Imagee}"  VerticalAlignment="Center" Margin="0,0,10,0"/>
    
                                </StackPanel>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid ItemWidth="100" ItemHeight="100" MaximumRowsOrColumns="1" VerticalChildrenAlignment="Center" />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.ItemContainerStyle>
                            <Style TargetType="GridViewItem">
                                <Setter Property="Margin" Value="4" />
                                <Setter Property="Padding" Value="10" />
                                <Setter Property="BorderBrush" Value="Gray" />
                                <Setter Property="BorderThickness" Value="1" />
                                <Setter Property="HorizontalContentAlignment" Value="Center" />
                                <Setter Property="VerticalContentAlignment" Value="Center" />
                            </Style>
                        </GridView.ItemContainerStyle>
                    </GridView>
                </SemanticZoom.ZoomedOutView>

    当然你会发现这个image控件的source是绑定Group.Imagee,所以你应该在后台为这个赋值,这样才能显示相应的图片,这个需要你自己来完成相应的逻辑代码编写。不过可以参考一下这个sample:

    XAML GridView grouping and SemanticZoom sample.

    如果想显示图片的话可以将GroupInfoList class定义修改如下:

     public class GroupInfoList<T> : List<object>
        {
    
            public object Key { get; set; }
            public string Imagee { get; set; }
    
            public new IEnumerator<object> GetEnumerator()
            {
                return (System.Collections.Generic.IEnumerator<object>)base.GetEnumerator();
            }
        }

    然后可以为每组的Imagee赋值,主要在internal List<GroupInfoList<object>> GetGroupsByLetter()这个方法中赋值,如下一个简单的赋值:

    internal List<GroupInfoList<object>> GetGroupsByLetter()
            {
                List<GroupInfoList<object>> groups = new List<GroupInfoList<object>>();
    
                var query = from item in Collection
                            orderby ((Item)item).Title
                            group item by ((Item)item).Title[0] into g
                            select new { GroupName = g.Key, Items = g };
                foreach (var g in query)
                {
                    GroupInfoList<object> info = new GroupInfoList<object>();
                    info.Key = g.GroupName;
                    info.Imagee = "SampleData/Images/60SauceChocolate.png";
                    foreach (var item in g.Items)
                    {
                        info.Add(item);
                    }
                    groups.Add(info);
                }
    
                return groups;
    
            }

    后台实现方法有很多,仅提供简单参考。

    祝您好运!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年2月18日 3:26
    版主