如何在windows phone RT app的列表视图中并排排列两个图像

时间:2015-12-13 10:53:37

标签: image listview windows-phone-8 windows-phone-8.1

我正在开发windows phone app,在这个应用程序中我想使用列表视图控件并排排列两个图像。实际上发生的事情是我在listview中绑定图像,但图像绑定另一个图像下面的一个图像是绑定。如何在listview中并排排列图像以及如何在所有分辨率屏幕中设置图像的宽度。请帮助我。

以下是我的示例代码。

<ListView x:Name="listviewfreecredits" Margin="0,-1,0.643,10" Height="521" IsItemClickEnabled="True" ItemClick="listviewfreecredits_ItemClick">

                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <StackPanel >
                                    <Grid Margin="10,10,50,10" Width="389" >


                                        <Image Source="{Binding DealImage}" Stretch="None" Width="400" Height="300" />


                                    </Grid>
                                </StackPanel>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>


  string result = "";

                HttpWebRequest request = HttpWebRequest.Create(Url.weburl + "FreeCredits_v2?PlatFormID=7") as HttpWebRequest;
                request.Method = "GET";


                WebResponse response = await request.GetResponseAsync();
                using (var reader = new StreamReader(response.GetResponseStream()))
                {
                    result = reader.ReadToEnd();
                    // Do anything with you content. Convert it to xml, json or anything.
                }


                JObject jobj = JObject.Parse(result);
                JArray jarr = (JArray)jobj["Deals"];
                if (jarr != null)
                {
                    for (int i = 0; i < jarr.Count; i++)
                    {
                        string DealImage = (string)jarr[i]["DealImage"];
                        string DealID = (string)jarr[i]["DealID"];
                        string Buttontext = (string)jarr[i]["Buttontext"];

                        freecredit obj = new freecredit();
                        obj.DealImage = Url.imgurl + DealImage;
                        obj.DealID = DealID;
                        obj.ButtonText = Buttontext;
                        this.listviewfreecredits.Items.Add(obj);

                    }

1 个答案:

答案 0 :(得分:0)

使用GridView控件代替ListView,对于每个图像的宽度,您可以计算它并绑定图像控件中图像的宽度,高度和高度。例如

<GridView x:Name="listviewfreecredits" Margin="0,-1,0.643,10" Height="521" IsItemClickEnabled="True" ItemClick="listviewfreecredits_ItemClick">

                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel >
                                <Grid Margin="10,10,50,10" Width="389" >


                                    <Image Source="{Binding DealImage}" Stretch="None" Width="{Bind ImageWidth}" Height="{Bind ImageWidth}" />


                                </Grid>
                            </StackPanel>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>

for (int i = 0; i < jarr.Count; i++)
                {
                    string DealImage = (string)jarr[i]["DealImage"];
                    string DealID = (string)jarr[i]["DealID"];
                    string Buttontext = (string)jarr[i]["Buttontext"];

                    freecredit obj = new freecredit();
                    obj.DealImage = Url.imgurl + DealImage;
                    obj.DealID = DealID;
                    obj.ButtonText = Buttontext;
                    //set image width, height by calculating with height accordingly
                    obj.ImageWidth = ((Windows.UI.Xaml.Window.Current.Bounds.Width - 50/ 2);
                    this.listviewfreecredits.Items.Add(obj);

                }

在freecredit类中将ImageWidth属性定义为double