LongListSelector:动态GridCellSize

时间:2013-07-25 11:31:49

标签: windows-phone-7 windows-phone-8 windows-phone

我有一个LongListSelector,我有以下ViewModel

ViewModel: 
    List<ListData>

ListData:
    Text
    Image

我需要动态的单元格大小取决于ListData。

如果没有Text,我将隐藏图像并使GridCellSize = 50.如果Image存在,GridCellSize应为250,250;

它看起来像这样:

 +---------+   +---------+
 |  Text   |   |  Text   |
 +---------+   +---------+
 +---------+   +---------+
 |  Text   |   |  Text   |
 +---------+   +---------+
 +---------+   +---------+
 |         |   |         |
 |         |   |         |
 |  Image  |   |  Image  |
 |         |   |         |
 |         |   |         |
 +---------+   +---------+
 +---------+   +---------+
 |         |   |         |
 |         |   |         |
 |  Image  |   |  Image  |
 |         |   |         |
 |         |   |         |
 +---------+   +---------+

我尝试使用转换器更改GridCellSize,但似乎GridCellSize需要为LongListSelector保持不变并适用于所有元素。

有没有办法实现这个目标?

1 个答案:

答案 0 :(得分:0)

在一行中我可以说你可以将你的网格高度和宽度属性绑定到一些双属性并且可以在你的逻辑上处理它。但是我也有一些代码用于你的逻辑。它可以帮助你.. < / p>

所以首先制作了一个 ListData 类,其中我已经制作了一些属性,这些属性将由 longlistSelector 的项目使用..这是类...

 public class ListData
{


    public double height { get; set; }
    public double width { get; set; }

    public string text { get; set; }
    public string ImagePath { get; set; }
    public Visibility isTextVisible { get; set; }
    public Visibility isImageVisible { get; set; }

}

现在我创建了一个 ObservableCollection ,您的 LongListSelector itemsSource 属性将用于绑定..

  public ObservableCollection<ListData> ListOfData { get; set; }

现在我已经用数据填充了这个集合。其中数据是你的 ListData 类具有不同属性值的对象将反映在 LongListSelector Item 中。我已经填写了我的主页构造函数..

 public MainPage()
    {
        InitializeComponent();
        ListOfData = new ObservableCollection<ListData>();
        ListData sd = new ListData();
        sd.ImagePath = "/Assets/1.jpg";
        sd.text = "";
        sd.isTextVisible = Visibility.Collapsed;
        sd.isImageVisible = Visibility.Visible;
        sd.height = 250;
        sd.width = 250;

        ListData sd1 = new ListData();
        sd1.ImagePath = "/Assets/1.jpg";
        sd1.text = "afhjkahfjkahjkghadgjkgjkv";
        sd1.isTextVisible = Visibility.Visible;
        sd1.isImageVisible = Visibility.Collapsed;
        sd1.height = 50;
        sd1.width = 50;

        ListOfData.Add(sd);
        ListOfData.Add(sd1);
        ListOfData.Add(sd);
        ListOfData.Add(sd1);
        ListOfData.Add(sd);
        ListOfData.Add(sd1);
        ListOfData.Add(sd);
        ListOfData.Add(sd1);

        this.DataContext = this;

        // Sample code to localize the ApplicationBar
        //BuildLocalizedApplicationBar();
    }

现在一切都准备好了......我已经设置了页面的数据和数据文本。所以剩下的是你的xaml页面,其中定义了LingListSelector。我已经把每个版本都绑定了..只是为了你的方便...

 <phone:LongListSelector Grid.Row="0" ItemsSource="{Binding ListOfData}">
        <phone:LongListSelector.ItemTemplate>
            <DataTemplate>
                <Grid Height="{Binding height}" Width="{Binding width}" >
                    <TextBlock Text="{Binding Path=text}" Visibility="{Binding isTextVisible}"/>
                    <Image Source="{Binding Path=ImagePath}" Visibility="{Binding isImageVisible}"  />
                </Grid>
            </DataTemplate>
        </phone:LongListSelector.ItemTemplate>
    </phone:LongListSelector>

这里......所有事情都在进行中..现在需要你的逻辑......希望它可以帮助你......