Hi i am developing windows phone 8 app.i want to display image on grid view format and i am using listbox inside grid but i didn't get any changes in my output.my code is given below,I want display data on grid view format.
<Grid x:Name="ContentPanel" Margin="0,115,0,0" Background="#424340" Grid.RowSpan="5" />
<StackPanel Margin="0,0,0,0.083" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Center" Grid.RowSpan="2">
<ListBox x:Name="List12" ItemsSource="{Binding}" VerticalAlignment="Top" SelectionChanged="NotchsList12_SelectionChanged"
Margin="0,0,0,0" HorizontalAlignment="left" Width="Auto" Grid.RowSpan="2">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Titles}" Foreground="Black" Width="189" Height="34" TextWrapping="Wrap" Padding="0,0,0,0"></TextBlock>
<Image Source="{Binding Images}" Width="189" Height="195" Name="value" Stretch="Fill" VerticalAlignment="Top" ></Image>
<TextBlock Text="Text1" Margin="0,0,10,0" HorizontalAlignment="Stretch" Grid.Column="0" Grid.Row="1" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
XDocument xmlDoc = XDocument.Parse(dataInXmlFile);
var query = from l in xmlDoc.Descendants("Category")
select new Class
{
Titles = l.Attribute("title").Value,
Images = l.Attribute("image").Value,
Articles = l.Element("SubCategory").Elements("Subcategory")
.Select(article => new Subclass
{
name = article.Attribute("name").Value,
Subimage = article.Attribute("subimage").Value,
Product = article.Element("Product").Elements("product")
.Select(articles => new Product
{
Price = articles.Element("productprice").Value,
ProductName = articles.Attribute("name").Value,
ProductImage = articles.Element("productimage").Value,
Shortdescription = articles.Element("productshortdiscription").Value
}).ToList(),
})
.ToList(),
};
foreach (var result in query)
{
Console.WriteLine(result.Titles);
Console.WriteLine(result.Images);
}
List12.DataContext = query;
I got out put like given below
1.Door 2.window 3.table 4.chair
I need out put like given below image
1.Door 2.window
3.table 4.chair
make ur stackPanel Orientation Vertical instead of Horizontal
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
Dont use grid, instead use LongListSelector using LayoutMode=Grid
Example:
<phone:LongListSelector ItemsSource="{Binding Categories}" LayoutMode="Grid" GridCellSize="200,200">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Border Background="#e67e22" Height="190" Width="190" Margin="6,0,0,0" Tap="Border_Tap" >
<TextBlock Text="{Binding Name}"></TextBlock>
</Border>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
Related
I have a GridView that displays Header and Sub-Items like so:
<GridView ItemsSource="{Binding Path=MainViewModels}">
<GridView.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border BorderBrush="White" BorderThickness="1"></Border>
<Grid VerticalAlignment="Top" HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="White" BorderThickness="1"></Border>
<TextBlock Grid.Row="0"
HorizontalAlignment="Left"
Foreground="#FFAAAAAA"
Style="{StaticResource Style_TextBlock_Label_H3}"
Text="{Binding Path=Description}" VerticalAlignment="Top" />
<GridView Grid.Row="1"
ItemsSource="{Binding Path=SubViewModels}">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Margin="0,0,5,0"
Text="{Binding Path=Description}"
TextWrapping="Wrap" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top">
</StackPanel>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
However, whenever it renders, it renders like this:
What I want to achieve is that all the "Header" are on the top, while the Items themselves extend to the bottom and then just overflow using the WrapGrid.
Can please point out where I am going wrong?
Thank you!
I have an ListBox UserControl and there is a grid control in the DataTemplate. I used the MVVM to bind the data. For Orientation change, I am able to change the wide of the ListBox, but I don't find the solution to change the grid column width inside the listbox. Would you help me how to do it or provide a example or link to me. Thanks in advance.
There is my UserControl.xaml
<UserControl x:Class="CMSPhoneApp.QueueListControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480"
xmlns:local="clr-namespace:CMSPhoneApp" >
<UserControl.Resources>
<local:VisibilityConverter x:Key="VisibilityConverter"/>
<local:ColumSpanConverter x:Key="ColumSpanConverter"/>
</UserControl.Resources>
<ListBox x:Name="lst" HorizontalAlignment="Left" Margin="6,6,0,0" VerticalAlignment="Top" Width="400"
ItemsSource="{Binding Path=MyQueue}"
SelectedItem="{Binding Path=CurrentQueue, Mode=TwoWay}" Height="380" >
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1,1,1,1" BorderBrush="Blue">
<Grid x:Name="grd" Width="auto" HorizontalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="125" />
</Grid.ColumnDefinitions>
<Image Source="{Binding Type}" Grid.Row="0" Grid.Column="0"/>
<TextBlock Grid.Row="0" Grid.Column="1" Grid.ColumnSpan= "{Binding isSpan, Converter={StaticResource ColumSpanConverter}}" Text="{Binding summary}" TextWrapping="Wrap"
Style="{StaticResource PhoneTextAccentStyle}" />
<Button x:Name="btnAction" Grid.Row="0" Grid.Column="3" ClickMode="Press" Click="btnAction_Click" Style="{StaticResource ButtonStyle1}"
Visibility="{Binding isVisibility, Converter={StaticResource VisibilityConverter}}"
Tag="{Binding callNumber}">
<Button.Content>
<TextBlock Width="85" Height="70" Text="{Binding ActionCaption}"
Style="{StaticResource LabelStyle_20}" />
</Button.Content>
</Button>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The OrientationChange code:
private void TestPage_OrientationChanged(
object sender, OrientationChangedEventArgs e)
{
ListBox lstControl = lst.lst;
Grid g = lstControl.ItemContainerGenerator.ContainerFromIndex(0) as Grid;
if (e.Orientation.ToString().Contains("Portrait"))
lst.lst.Height = 400;
else
lst.lst.Height = 120;
}
Instead of absolute values for the column width, you should use percentage or "Star Sizing". Star sizing allows the width of a column (or height of a row) to grow or shrink as the available size changes.
Here is an example to use:
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".1*" />
<ColumnDefinition Width=".6*"/>
<ColumnDefinition Width=".3*" />
</Grid.ColumnDefinitions>
Along with this you should remove the Width value of the ListBox and allow it to fill all available space.
In expression blend I created a sample data source in visual editor. In case of using a listbox I simply drag the collection there and data is automatically shown.
Now, I am interested to retrieve data from datasource from code behind. Is this possible?
There are a couple ways to do this, I will give you the simplest. I have a ListPicker that is bascially the same as a ListBox: Here is my ListPicker markup: Also here is a link
<toolkit:ListPicker Name="lpDrag" Grid.Row="4" Grid.Column="1" Loaded="lptest_Loaded" SelectedIndex="0">
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding name}" />
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" ></ColumnDefinition>
<ColumnDefinition ></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding name}" FontSize="26" Grid.Column="0" Grid.Row="0"/>
<TextBlock Text="{Binding desc}" TextWrapping="Wrap" FontSize="26" Grid.Column="1" Grid.Row="0" />
</Grid>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
Here is the code behind:
lpDrag.ItemsSource = //Whatever your datasource is
I am using MVVM pattern and I am trying to bind a public ObservableCollection Friends property to LongListSelector
<toolkit:LongListSelector
ItemsSource="{Binding Friends}"
GroupHeaderTemplate="{StaticResource movieGroupHeader}"
ListHeaderTemplate="{StaticResource movieListHeader}">
<toolkit:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid Margin="12,8,0,8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" VerticalAlignment="Top">
<TextBlock Text="{Binding MyBoxName}" Style="{StaticResource PhoneTextLargeStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="12,-12,12,6"/>
<TextBlock Text="{Binding MyBoxID}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Status:" Style="{StaticResource PhoneTextSmallStyle}"/>
<TextBlock Text="{Binding Status}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</toolkit:LongListSelector.ItemTemplate>
</toolkit:LongListSelector>
Now issues is when i try to add
_friends.Add(new Model.Friends
{
MyBoxID = e.RosterItem.Jid,
MyBoxName = e.RosterItem.Name,
Status = Matrix.Xmpp.PresenceType.unavailable
})
it gives InvalidCastException so i tried List instead of ObservableCollection. Now i don't get exception but nothing is displayed in LLS. How can i bind My ObservableCollection property to LLS with Grouping.
For LongListSelector you need not just a collection, but some more complex structure to support grouping
Look at LongListCollection. It's great class that should help you
Usage:
var list = new LongListCollection<Event, string>(Events, x => x.Date.ToLongDateString());
I have a ItemTemplate like this
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Button Grid.Row="0">
<Button.Template>
<ControlTemplate>
<Border BorderBrush="AntiqueWhite" BorderThickness="1">
<StackPanel Orientation="Horizontal" Background="Gray" Width="465">
<Image Margin="2,0,10,0" Source="{Binding StateImage}" Stretch="None"/>
<TextBlock Name="txt" Text="{Binding DateLabel}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
<Custom:Interaction.Triggers>
<Custom:EventTrigger EventName="Click">
<mx:EventToCommand Command="{Binding VisibilityListboxCommand}"
CommandParameter="{Binding EementName=txt, Path=Text}"
/>
</Custom:EventTrigger>
</Custom:Interaction.Triggers>
</Button>
<ListBox Grid.Column="1" ItemsSource="{Binding WhatsonList, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="0,0,0,1" Padding="0,0,0,10">
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="360"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<Button>
.....
</Button>
<CheckBox Template="{StaticResource CheckboxImageTemplate}" Margin="0,5,0,0"/>
</StackPanel>
<ListBox Grid.Column="1">
.....
</ListBox>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
When I click on button inside listboxitem datatemplate I want to get content of textblock txt to find out what listbox item was clicked to trace back index in the List(model) that listbox bind from.
But from commandparameter I cannot get anything because there are many textblock named txt I think.
Please help me !
A better way to solve this is by binding the CommandParameter to 'thing' in the DataContext of the item like this:
<Custom:Interaction.Triggers>
<Custom:EventTrigger EventName="Click">
<mx:EventToCommand Command="{Binding VisibilityListboxCommand}"
CommandParameter="{Binding}" />
</Custom:EventTrigger>
</Custom:Interaction.Triggers>
This way the binding does not rely on a particular control being present and having a specific name.