Pertanyaan Bagaimana Menampilkan item Gridview dengan lebar variabel di Windows 8?


Item GridView saya memiliki ukuran sebesar itu first item size. Bagaimana saya bisa mengubah perilaku ini?

Bagaimana cara menampilkan GridView items dengan variabel Width sesuai konten?


  enter image description here

Saya ingin menunjukkan yang pertama tetapi saya mendapatkan yang kedua.
 Ada saran untuk melakukan itu?


6
2018-06-13 09:58


asal


Jawaban:


Memeriksa Windows 8 GridView dan Item Berukuran Variabel dan Item Ubin Berukuran berbeda di WinRT GridView dan juga periksa Kerangka Grid Berukuran Variabel
 Semoga bantuan ini


3
2018-06-13 12:08



Anda dapat membuat tampilan seperti itu GridView dengan pengaturan ItemsPanel untuk WrapPanel, Anda bisa mendapatkan WrapPanel di Blog Jerry Nixon. Ini kodenya.

XAML

<GridView x:Name="gv">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <local:WrapPanel Orientation="Horizontal"  />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid Height="140" Width="{Binding MyWidth}">
                <Grid.Background>
                    <SolidColorBrush Color="{Binding MyColor}" />
                </Grid.Background>
                <TextBlock FontSize="20" VerticalAlignment="Bottom" Margin="10,0,0,10">
                    <Run Text="{Binding MyWidth}" />
                </TextBlock>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

C #

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var list = new List<ViewModel>() 
    {
        new ViewModel(110, Colors.LawnGreen),
        new ViewModel(50, Colors.DarkBlue),
        new ViewModel(130, Colors.Firebrick),
        new ViewModel(60, Colors.RosyBrown),
        new ViewModel(100, Colors.IndianRed),
        new ViewModel(210, Colors.BurlyWood),
        new ViewModel(150, Colors.Turquoise)
    };

    gv.ItemsSource = list;
}

public class ViewModel
{
    public double MyWidth { get; set; }
    public Color MyColor { get; set; }

    public ViewModel(double _MyWidth, Color _MyColor)
    {
        MyWidth = _MyWidth;
        MyColor = _MyColor;
    }
}

3
2018-06-13 12:08



Inilah solusi saya.

// tampilan grid ukuran variabel

public class VariableSizedGridView : GridView
{
    protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
    {
        try
        {
            dynamic gridItem = item;

            var typeItem = item as CommonType;
            if (typeItem != null)
            {
                var heightPecentage = (300.0 / typeItem.WbmImage.PixelHeight);
                var itemWidth = typeItem.WbmImage.PixelWidth * heightPecentage;
                var columnSpan = Convert.ToInt32(itemWidth / 10.0);


                if (gridItem != null)
                {
                    element.SetValue(VariableSizedWrapGrid.ItemWidthProperty, itemWidth);
                    element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, columnSpan);
                    element.SetValue(VariableSizedWrapGrid.RowSpanProperty, 1);
                }
            }
        }
        catch
        {
            element.SetValue(VariableSizedWrapGrid.ItemWidthProperty, 100);
            element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 1);
            element.SetValue(VariableSizedWrapGrid.RowSpanProperty, 1);
        }
        finally
        {
            base.PrepareContainerForItemOverride(element, item);
        }
    }

// Collection View source

     <CollectionViewSource  x:Name="collectionViewSource"
                           Source="{Binding ImageList,Mode=TwoWay}"
                           IsSourceGrouped="False"
                           ItemsPath="Items" />   

// variabel berukuran tampilan Grid xaml

     <controls:VariableSizedGridView x:Name="ImageGridView"
                      AutomationProperties.AutomationId="ImageGridView"                            
                      ItemsSource="{Binding Source={StaticResource collectionViewSource}}" 
                      IsItemClickEnabled="True"
                      TabIndex="1" >
     <controls:VariableSizedGridView.ItemTemplate>
     <DataTemplate>
    <Grid Height="300" >
        <Image Stretch="Uniform" Source="{Binding WbmImage}" />
    </Grid>
    </DataTemplate>
    </controls:VariableSizedGridView.ItemTemplate>
                <controls:VariableSizedGridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid  ItemWidth="10"   ItemHeight="300" Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </controls:VariableSizedGridView.ItemsPanel>                  
    </controls:VariableSizedGridView>

1
2018-06-14 05:48