Windows Phone的8.1两列GridView控件里枢轴 [英] Windows Phone 8.1 Two Column Gridview Within Pivot

查看：273
本文介绍了Windows Phone的8.1两列GridView控件里枢轴的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有显示在Windows Phone的应用程序8.1一个两列的gridview的麻烦。



这是我想要的结果：



审议的其他SO问题处理类似的问题，我公司生产的以下代码：

 <&帆布GT; 
 
<电网螺纹=Grid_Tapped> 
< Grid.RowDefinitions> 
< RowDefinition HEIGHT =93 */> 
< RowDefinition HEIGHT =35 */> 
< /Grid.RowDefinitions> 
 
 
<枢轴NAME =centerPivot保证金=0,109,0,0Grid.Row =0Grid.RowSpan =2Canvas.ZIndex =2螺纹=centerPivot_Tapped> 
< PivotItem NAME =FindPivotItem保证金=11,10,13,0.333> 
< PivotItem.Header> 
<网格和GT; 
< TextBlock的名称=FindTitle字号=31文本=商店查找前景=＃FF878787的FontFamily =全球用户界面/> 
< /网格和GT; 
< /PivotItem.Header> 
<！ - < GridView的
 ScrollViewer.VerticalScrollBarVisibility =可见
 
的ItemTemplate ={结合ManyListingStyle}
 
 Grid.Row =1
 VerticalAlignment =评出的
 VerticalContentAlignment =评出的HEIGHT =450保证金=0,0，-0.167,0
 />  - > 
 
< GridView的
 
 NAME =GridGridView
 
的ItemsSource ={结合}
 Grid.Row =4 
 IsSwipeEnabled =真
的SelectionMode =单
 ScrollViewer.VerticalScrollBarVisibility =可见
 ScrollViewer.VerticalScrollMode =已启用保证金=0,0,0,0.333 的Horizo​​ntalAlignment =左
> 
< GridView.ItemsPanel> 
< ItemsPanelTemplate> 
< WrapGrid方向=垂直
 MaximumRowsOrColumns =3
 
> 
 
< / WrapGrid> 
< / ItemsPanelTemplate> 
< /GridView.ItemsPanel> 
< GridView.ItemTemplate> 
<&DataTemplate的GT; 
 
<电网的Horizo​​ntalAlignment =左WIDTH =190HEIGHT =240> 
<矩形填充=＃FFF4F4F5的Horizo​​ntalAlignment =左HEIGHT =193行程=黑VerticalAlignment =评出的WIDTH =176保证金=0,0,0，-8 /> 
<图像的Horizo​​ntalAlignment =左HEIGHT =128保证金=13,8,0,0VerticalAlignment =评出的WIDTH =150来源=资产/ example.jpg/> 
< TextBlock中的Horizo​​ntalAlignment =左保证金=13,141,0,0TextWrapping =自动换行文本={结合称号}VerticalAlignment =评出的前景=黑字号=16宽=150的FontFamily =全球用户界面/> 
< TextBlock中的Horizo​​ntalAlignment =左保证金=118,165,0,0TextWrapping =自动换行文本={结合价格}VerticalAlignment =评出的前景=＃FFFF9700字号=16 WIDTH =48/> 
 
< /网格和GT; 
 
 
< / DataTemplate中> 
< /GridView.ItemTemplate> 
< GridView.ItemContainerStyle> 
<风格的TargetType =FrameworkElement的> 
 
< /样式和GT; 
< /GridView.ItemContainerStyle> 
 
<！ - <电网保证金=214,10,10,421> 
<矩形填充=＃FFF4F4F5的Horizo​​ntalAlignment =左HEIGHT =209行程=黑VerticalAlignment =评出的WIDTH =176/> 
<图像的Horizo​​ntalAlignment =左HEIGHT =150保证金=13,8,0,0VerticalAlignment =评出的WIDTH =150来源={结合}/> 
< TextBlock中的Horizo​​ntalAlignment =左保证金=13,163,0,0TextWrapping =自动换行文本={结合GetListTitle}VerticalAlignment =评出的前景=黑字号=16宽=150/> 
< TextBlock中的Horizo​​ntalAlignment =左保证金=115,187,0,0TextWrapping =自动换行文本={结合用getPrice}VerticalAlignment =评出的前景=＃FFFF9700字号=16 WIDTH =48/> 
 
< /网格>  - > 
<！ - < /GridView.ItemTemplate>  - > 
< / GridView的> 
 
< / PivotItem> 
< /枢轴> 
<矩形X：NAME =ScreenDimRectangle填充=＃FF555453的Horizo​​ntalAlignment =左HEIGHT =640行程=黑VerticalAlignment =评出的WIDTH =400不透明度=0.5 
 Grid.Row =0Grid.RowSpan =2能见度=坍塌Canvas.ZIndex =9/> 
 
 
< /网格和GT; 
< /帆布>

这代码，然而，当绑定到一个列表元素与8个目标，显示以​​下内容：



这也布局的不滚动



在网络周围大量的研究后，我认为我很坚持。我会认为 WrapGrid 和 MaximumRowsOrColumns 设置应该是我真正在这里后，他们的设置应该（在根据其他人）至少我产生预期的结果。



我的绑定代码：

  //创建新的假房源
变种列表=新的List<清单>（）; 
 
变种fakelisting1 =新上市（）; 
 fakelisting1.title =全新的产品！ 
 fakelisting1.price =9.99; 
 listings.Add（fakelisting1）; 
 
变种fakelisting2 =新上市（）; 
 fakelisting2.title =这里是新的产品！ 
 fakelisting2.price =19.99; 
 listings.Add（fakelisting2）; 
 
变种fakelisting3 =新上市（）; 
 fakelisting3.title =这里是新的2产品！ 
 fakelisting3.price =29.99; 
 listings.Add（fakelisting3）; 
 
变种fakelisting4 =新上市（）; 
 fakelisting4.title =这里是新的3产品！ 
 fakelisting4.price =39.99; 
 listings.Add（fakelisting4）; 
 
变种fakelisting5 =新上市（）; 
 fakelisting5.title =这里是新的4产品！ 
 fakelisting5.price =49.99; 
 listings.Add（fakelisting5）; 
 
变种fakelisting6 =新上市（）; 
 fakelisting6.title =这里是新5Product！; 
 fakelisting6.price =59.99; 
 listings.Add（fakelisting6）; 
 
变种fakelisting7 =新上市（）; 
 fakelisting7.title =这里是新6Product！; 
 fakelisting7.price =49.99; 
 listings.Add（fakelisting7）; 
 
变种fakelisting8 =新上市（）; 
 fakelisting8.title =这里是新7Product！; 
 fakelisting8.price =49.99; 
 listings.Add（fakelisting8）; 
 
 GridGridView.DataContext =清单;



为什么我没有看到这个结果？


解决方案

我做了什么：




  • 当你想在的 WrapGrid 的横放第一，使用方向=水平，

  • 我已经改变了项目的网格宽度为180，当它是190然后项目被垂直放置，因为我的屏幕上的宽度太小，

  • 我已经改变了的 MaximumRowsOrColumns 的2，只要你想两个项目水平，

  • 我已经删除了的的ScrollViewer 的信息 - 它正在通过的 GridView控件

  • 我'已经删除的画布的，这样的 GridView控件的知道多少地方都有。



中的代码是这样的：



<预类=郎咸平的XML prettyprint -override> <电网保证金=0,150,0,0抽头=Grid_Tapped>
< Grid.RowDefinitions>
< RowDefinition HEIGHT =93 */>
< RowDefinition HEIGHT =35 */>
< /Grid.RowDefinitions>

<枢轴NAME =centerPivot保证金=0,0,0,0Grid.Row =0Grid.RowSpan =2Canvas.ZIndex =2螺纹= centerPivot_Tapped>
< PivotItem NAME =FindPivotItem保证金=11,10,13,0.333>
< PivotItem.Header>
<网格和GT;
< TextBlock的名称=FindTitle字号=31文本=商店查找前景=＃FF878787的FontFamily =全球用户界面/>
< /网格和GT;
< /PivotItem.Header>

< GridView的名称=GridGridView的ItemsSource ={结合}
的SelectionMode =单保证金=0,0,0,0.333的Horizo​​ntalAlignment =左>
< GridView.ItemsPanel>
< ItemsPanelTemplate>
< WrapGrid方向=横向MaximumRowsOrColumns =2/>
< / ItemsPanelTemplate>
< /GridView.ItemsPanel>
< GridView.ItemTemplate>
<&DataTemplate的GT;
<电网的Horizo​​ntalAlignment =左WIDTH =180HEIGHT =240>
<矩形填充=＃FFF4F4F5的Horizo​​ntalAlignment =左HEIGHT =193行程=黑VerticalAlignment =评出的WIDTH =176保证金=0,0,0，-8 />
<图像的Horizo​​ntalAlignment =左HEIGHT =128保证金=13,8,0,0VerticalAlignment =评出的WIDTH =150来源=资产/ example.jpg/>
< TextBlock中的Horizo​​ntalAlignment =左保证金=13,141,0,0TextWrapping =自动换行文本={结合称号}VerticalAlignment =评出的前景=黑字号=16宽=150的FontFamily =全球用户界面/>
< TextBlock中的Horizo​​ntalAlignment =左保证金=118,165,0,0TextWrapping =自动换行文本={结合价格}VerticalAlignment =评出的前景=＃FFFF9700字号=16 WIDTH =48/>
< /网格和GT;
< / DataTemplate中>
< /GridView.ItemTemplate>
< / GridView的>
< / PivotItem>
< /枢轴>
< /网格和GT;

和结果：




I am having trouble displaying a two column gridview in a Windows Phone 8.1 application.

This is my intended result:

After reviewing other SO questions dealing with similar issues, I produced the following code:

 <Canvas>

    <Grid Tapped="Grid_Tapped">
        <Grid.RowDefinitions>
            <RowDefinition Height="93*"/>
            <RowDefinition Height="35*"/>
        </Grid.RowDefinitions>


        <Pivot  Name="centerPivot" Margin="0,109,0,0" Grid.Row="0" Grid.RowSpan="2" Canvas.ZIndex="2" Tapped="centerPivot_Tapped">
            <PivotItem Name="FindPivotItem" Margin="11,10,13,0.333">
                <PivotItem.Header>
                    <Grid>
                        <TextBlock Name="FindTitle" FontSize="31" Text="Store Finds" Foreground="#FF878787" FontFamily="Global User Interface" />
                    </Grid>
                </PivotItem.Header>
                <!--<GridView 
                  ScrollViewer.VerticalScrollBarVisibility="Visible" 

                  ItemTemplate="{Binding ManyListingStyle}"

                  Grid.Row="1" 
                  VerticalAlignment="Top" 
                  VerticalContentAlignment="Top" Height="450" Margin="0,0,-0.167,0" 
             />-->

                <GridView 

                Name="GridGridView"

                ItemsSource="{Binding}"
                Grid.Row="4"
                IsSwipeEnabled="True" 
                SelectionMode="Single" 
                ScrollViewer.VerticalScrollBarVisibility="Visible"
                ScrollViewer.VerticalScrollMode="Enabled" Margin="0,0,0,0.333" HorizontalAlignment="Left"
                >
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid Orientation="Vertical"
                                  MaximumRowsOrColumns="3"

                                  >

                            </WrapGrid>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridView.ItemTemplate>
                        <DataTemplate>

                            <Grid HorizontalAlignment="Left" Width="190" Height="240">
                                <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="193" Stroke="Black" VerticalAlignment="Top" Width="176" Margin="0,0,0,-8"/>
                                <Image HorizontalAlignment="Left" Height="128" Margin="13,8,0,0" VerticalAlignment="Top" Width="150" Source="Assets/example.jpg"/>
                                <TextBlock HorizontalAlignment="Left" Margin="13,141,0,0" TextWrapping="Wrap" Text="{Binding title}" VerticalAlignment="Top" Foreground="Black" FontSize="16" Width="150" FontFamily="Global User Interface"/>
                                <TextBlock HorizontalAlignment="Left" Margin="118,165,0,0" TextWrapping="Wrap" Text="{Binding price}" VerticalAlignment="Top" Foreground="#FFFF9700" FontSize="16" Width="48"/>

                            </Grid>


                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <GridView.ItemContainerStyle>
                        <Style TargetType="FrameworkElement">

                        </Style>
                    </GridView.ItemContainerStyle>

                    <!--<Grid Margin="214,10,10,421">
                <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="209" Stroke="Black" VerticalAlignment="Top" Width="176"/>
                <Image HorizontalAlignment="Left" Height="150" Margin="13,8,0,0" VerticalAlignment="Top" Width="150" Source="{Binding}"/>
                <TextBlock HorizontalAlignment="Left" Margin="13,163,0,0" TextWrapping="Wrap" Text="{Binding GetListTitle}" VerticalAlignment="Top" Foreground="Black" FontSize="16" Width="150"/>
                <TextBlock HorizontalAlignment="Left" Margin="115,187,0,0" TextWrapping="Wrap" Text="{Binding GetPrice}" VerticalAlignment="Top" Foreground="#FFFF9700" FontSize="16" Width="48"/>

            </Grid>-->
                    <!--</GridView.ItemTemplate>-->
                </GridView>

            </PivotItem>
        </Pivot>
        <Rectangle x:Name="ScreenDimRectangle" Fill="#FF555453" HorizontalAlignment="Left" Height="640" Stroke="Black" VerticalAlignment="Top" Width="400" Opacity="0.5"
               Grid.Row="0" Grid.RowSpan="2" Visibility="Collapsed" Canvas.ZIndex="9"/>


    </Grid>
</Canvas>

This code, however, when bound to a list element with 8 objects, displays the following:

This layout also does not scroll .

After researching the around the web heavily, I believe I am quite stuck. I would think that the WrapGrid and MaximumRowsOrColumns settings should be what I am really after here, and their settings should (at least according to others) produce my intended result.

My Binding Code:

//Create new Fake Listings
        var listings = new List<Listing>();

        var fakelisting1 = new Listing();
        fakelisting1.title = "Brand new Product!";
        fakelisting1.price = "9.99";
        listings.Add(fakelisting1);

        var fakelisting2 = new Listing();
        fakelisting2.title = "Here is the new Product!";
        fakelisting2.price = "19.99";
        listings.Add(fakelisting2);

        var fakelisting3 = new Listing();
        fakelisting3.title = "Here is the new 2Product!";
        fakelisting3.price = "29.99";
        listings.Add(fakelisting3);

        var fakelisting4 = new Listing();
        fakelisting4.title = "Here is the new 3Product!";
        fakelisting4.price = "39.99";
        listings.Add(fakelisting4);

        var fakelisting5 = new Listing();
        fakelisting5.title = "Here is the new 4Product!";
        fakelisting5.price = "49.99";
        listings.Add(fakelisting5);

        var fakelisting6 = new Listing();
        fakelisting6.title = "Here is the new 5Product!";
        fakelisting6.price = "59.99";
        listings.Add(fakelisting6);

        var fakelisting7 = new Listing();
        fakelisting7.title = "Here is the new 6Product!";
        fakelisting7.price = "49.99";
        listings.Add(fakelisting7);

        var fakelisting8 = new Listing();
        fakelisting8.title = "Here is the new 7Product!";
        fakelisting8.price = "49.99";
        listings.Add(fakelisting8);

        GridGridView.DataContext = listings;

Why am I not seeing that result?

解决方案

What I've done:

  • when you want your items in WrapGrid be placed horizontally first, use Orientation=Horizontal,
  • I've changed the item's grid width to 180, when it was 190 then items were placed vertically, as on my screen the width was too small,
  • I've changed MaximumRowsOrColumns to 2 as you want two items horizontally,
  • I've removed the ScrollViewer information - it's being applied automatically by GridView.
  • I've removed Canvas, so the GridView knows how much place it has.

The code look like this:

<Grid Margin="0,150,0,0" Tapped="Grid_Tapped" >
    <Grid.RowDefinitions>
        <RowDefinition Height="93*"/>
        <RowDefinition Height="35*"/>
    </Grid.RowDefinitions>

    <Pivot Name="centerPivot" Margin="0,0,0,0" Grid.Row="0" Grid.RowSpan="2" Canvas.ZIndex="2" Tapped="centerPivot_Tapped">
        <PivotItem Name="FindPivotItem" Margin="11,10,13,0.333">
            <PivotItem.Header>
                <Grid>
                    <TextBlock Name="FindTitle" FontSize="31" Text="Store Finds" Foreground="#FF878787" FontFamily="Global User Interface" />
                </Grid>
            </PivotItem.Header>

            <GridView Name="GridGridView" ItemsSource="{Binding}"
                      SelectionMode="Single" Margin="0,0,0,0.333" HorizontalAlignment="Left">
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Grid HorizontalAlignment="Left" Width="180" Height="240">
                            <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="193" Stroke="Black" VerticalAlignment="Top" Width="176" Margin="0,0,0,-8"/>
                            <Image HorizontalAlignment="Left" Height="128" Margin="13,8,0,0" VerticalAlignment="Top" Width="150" Source="Assets/example.jpg"/>
                            <TextBlock HorizontalAlignment="Left" Margin="13,141,0,0" TextWrapping="Wrap" Text="{Binding title}" VerticalAlignment="Top" Foreground="Black" FontSize="16" Width="150" FontFamily="Global User Interface"/>
                            <TextBlock HorizontalAlignment="Left" Margin="118,165,0,0" TextWrapping="Wrap" Text="{Binding price}" VerticalAlignment="Top" Foreground="#FFFF9700" FontSize="16" Width="48"/>
                        </Grid>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>
        </PivotItem>
    </Pivot>
</Grid>

And the result:

这篇关于Windows Phone的8.1两列GridView控件里枢轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆