I've try to adopt the CollectionView of iOS on WPF. The background is the migration of an iOS App to a Windows Store App (Windows 10 Universal App).
I try to create a List of clickable objects which contain:
a label
a image
How can I do this? It should look like this:
http://i.stack.imgur.com/ETsqy.png
Can somebody give me an example of XAML code for my purpose?
Sure. Google for itemscontrol, there you get in "ItemsSource" a specific type of model (Class), and that class type is your itemscontrol dataContext.
in this control you can handle ItemTemplate in order to create a template to the given class.
<ItemsControl Name="icTodoList" ItemsSource="{Binding MyClass}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Image)"
<TextBlock Text="{Binding Title}"
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Related
i'm trying to make my App Design responsive.
i have ListView that have a dataTemplate with defined property:
<ListView x:Name="listView" ItemsSource="{x:Bind manager.recentVideos}"
IsItemClickEnabled="True"
ItemClick="ListView_ItemClick">
<ListView.ItemTemplate>
<DataTemplate x:DataType="data:VideoItem" >
<Image Width="200"
Source="{x:Bind TileImage}" Margin="-10,0,-10,5"
></Image>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I'm trying to change Image Width with VisualStateTrigers...
so i need to Target Setter to this property somehow....
Someone please help! :)
VisualStateTriggers are not supported inside DataTemplates. Just use a UserControl as your DataTemplate as is suggested in this:
AdaptiveTrigger and DataTemplate
SOF Tribe,
I have a request for the identity of a flow container into which I can pour an indeterminate number of dynamically created XAML buttons. Said buttons should wrap the text as closely as possible (I think I have a template for this). But the buttons should wrap like a gridview, but run like a stackpanel. Does anyone know a container that will allow me to accomplish what the image portrays?
Currently, for the existing image below, I'm using a gridview, but the gridview sets a specific width but does flow unevenly. A stackpanel has the desired end-to-butt style but won't wrap. So, any ideas?
There is what is called the UniversalWrapPanel made by Greg Stoll. So, that's the direction I'll be taking. Now however, I've got the last little bit to tackle. How to get the bound data to respect the parent container's ability to wrap content and not just stack it up in a vertical column.
The below XAML gives me the below image result which is not quite what I want. Statically added buttons work just fine to the UniversalWrapPanel. But trying to get a binding and ItemsSource to work, well, that's beyond me at this time.
<support:UniversalWrapPanel Orientation="Horizontal" Background="White">
<ItemsControl x:Name="GridViewRecipients" ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Style="{StaticResource ButtonLozengeStyle}" Content="{Binding FullName}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</support:UniversalWrapPanel>
OK, so a bit more searching and I found this:
http://www.visuallylocated.com/post/2015/02/20/Creating-a-WrapPanel-for-your-Windows-Runtime-apps.aspx
and so here is the correct way to reference the UniversalWrapPanel within the ItemsControl:
<ItemsControl x:Name="GridViewRecipients" ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<support:UniversalWrapPanel Orientation="Horizontal" Background="DodgerBlue"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Style="{StaticResource ButtonLozengeStyle}" Content="{Binding FullName}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
For the result of:
I'm working on a project (for Windows Phone 8 with Visual Studio 2012 with C#) where I want to display some items that each have:
a picture
a title
a description
to be able to be clicked (so that I can navigate to a certain Page)
So I thought I could do that with a stackpanel. But I'm not sure how I can add items that have the above properties and to be able to add those items from XAML. I tired adding items through a ItemsControl in stackpanel but I'm not sure how I can add more complex items like the one I want.
The best approach is to use a ListBox or LongListSelector rather than a StackPanel. You can then:
Data bind the list to the control itself, which will handle adding/deleting items from the control automatically
Define the view for each control using ListBox's ItemTemplate property
First of all, in your code-behind/ViewModel/what-have-you, you'll want to create an ObservableCollection of objects to display. ObservableCollection will let the control know to update in the case an item is added, removed, etc.
public ObservableCollection<T> foo = new ObservableCollection<T>();
In XAML, you'll then want to databind this ObservableCollection to the ListBox you've created:
<ListBox x:Name="ListBox" ItemsSource="{Binding foo}" />
Finally, you can define the ItemTemplate of the ListBox like so:
<ListBox x:Name="ListBox" ItemsSource="{Binding foo}" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="2">
<TextBlock Text="{Binding Title}" />
<TextBlock Text="{Binding Description}" />
<Image Source="{Binding Image}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I'd highly recommend reading this guide, especially "Binding a control to a collection of objects" and the section after on DataTemplates. :)
Using the Bing Maps WPF-SDK it is esy to integrate a map. But I would like to use the Bing-Map as DataTemplate for an ItemsControl element. If I do so, unfortunately, the maps object does not react to any bindings and it obviously does not accept the Credentials Key. My code is as follows:
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type s:Point}">
<ContentControl
Width="{Binding Width, Mode=TwoWay}"
Height="{Binding Height, Mode=TwoWay}"
Template="{StaticResource InteractiveItemTemplate}">
<m:Map Margin="5" ZoomLevel="5" CredentialsProvider="MyCredentials" />
</ContentControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
Even the ZoomLevel of 5 is not used, the map is always in default view and it displays the "Invalid Credentials" message. How to use the map in a DataTemplate properly
Alright, so my own answer is: it seems not to work if one adds the code above directly in the MainViewWindow.xaml. But once I created an separate UserControl.xaml with the Map, I than use the UserControl as DataTemplate it works well.
Right now I use a ListBox but that allows the user to select an item which I don't want. Is there a way to disable selecting or a more suitable control I can use?
Right now I have this:
<ListBox ItemsSource="{Binding Path=PersonNames}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" FontSize="20"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Use an ItemsControl, it's a base class without selection. (As it does not provide its own ScrollViewer you may need to add one (either in the template or around the control) if you need scrolling)
See the ListView control.