What is the equivilent of a UITableView in Windows Phone 7 development?
I'm trying to make the equivalent of a custom UITableViewCell with an image on the left and custom UILabels on the right side. Obviously the amount of rows is based on the count of an array of values.
Can someone give me some pointers on what I should do to get the same effect on Windows Phone 7.1?
For any list type of UI element, you would want to use a ListBox, with a custom DataTemplate.
XAML is more about flexibility, so you don't have specialized UI elements, but instead you can customize a number of base controls to look precisely like you want them.
You probably want a Grid inside your DataTemplate
There is two controls: ListBox for plain list and LongListSelector for grouped list (like in contacts)
In both cases you need to set ItemTemplate, for ex:
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horisontal">
<Image Source="img.png"/>
<TextBlock Text="Label"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Related
on Windows 8.1 below code indicates the selected item of GridView. But on Windows Phone Xaml same code doesn't work like that. There isn't any visual indicator for selected item at all.(or i couldn't get it to work) How can i make it work like this on Windows Phone App too?
<GridView
x:Name="productColorChoices"
SelectionMode="Single"
ItemTemplate="{StaticResource productColorChoice_ItemTemplate}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid
Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
If you go look at the GridViewItem default style template you'll see towards the bottom you have these objects in there;
SelectedBorder
SelectedCheckMarkOuter
SelectedCheckMark
SelectedEarmark
Which is what makes up the visuals for that selected outline/checkmark thingy on the GridView items. They all get shown according to the VisualState for Selected
Now, if you go and look at the phone's default style template for the GridViewItem's (which I couldn't find the default one for with a quick google search and I don't have a phone project open to go dig through) then you can compare. If these types of elements don't exist in the phone templates then you can go add them the same way using pretty much the same objects and the same storyboards in the same VisualState.
Hope this helps, cheers.
This is what my main program GUI will look like, what I am attempting to do, is to create a reminder application in C# using wpf.
I am going to use a scroll viewer which is going to be displaying the data to the user, namely the reminders they currently have.
Each time the user adds a reminder, it will add this:
What I am wanting to do is that, when ever the user add's a new reminder, there will be a new set of data added to the scrollviewer.
What would be the best way of achieving this?
Am I able to hold the xaml data and add it during execution?
Thanks for the help
What you want to do can be accomplished not by dynamic Xaml, but by the use of a templated control which can accept dynamic data. For example you wouldn't consider using a listbox for your labels because you are not showing the data in a list right?
But a listbox is just a conveyor belt for what you want to achive. Say you want more than a label, how about three labels. Via binding to a proper structure you can get what is needed.
Here is an example
<ListBox ItemsSource="{Binding myReminders }">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=ReminderName}" />
<TextBlock Text="{Binding Path=Description}"/>
<TextBlock Text="{Binding Path=Priority}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Once that is bound to a list of my reminder data objects (which the list can dynamically change), we have the ability to show the reminders in any format we want. One just uses the above to style it appropriately. (Check out WPF's Templating Overview for a great example).
The use of templates is done in other controls, so if the listbox is not to your liking, look into other templated controls.
When my app is snapped displaying a GridView isn't the best way to present the information. I want to present it in a ListView instead. I also want to change the item template as well.
I currently have a UserControl that accepts the DataContext as the item template so I can simply create a new view and use that instead and it should work. So I'm basically looking to swap local:NormalDetailView with local:SnappedDetailView
Originally I thought about having both the ListView and GridView in there at the same time and adjusting the visibility based on snapped mode. But I had doubts about the performance about this technique.
Lastly, this is a LayoutAwarePage so I do have all that XAML stuff at the bottom about VisualStateManager.VisualStateGroups etc.
<GridView x:Name="GalleryGridView"ItemsSource="{Binding ListOfItems}">
<GridView.ItemTemplate>
<DataTemplate>
<local:NormalDetailView VerticalAlignment="Center" Width="250" Height="250" DataContext="{Binding}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
The performance is just fine if you use both a gridview and a listview, and adjust visibility depending on view state. This is exactly what the "split-application" template in Visual Studio does.
Just generate an app based on this template and take a look at ItemsPage.xaml and ItemsPage.xaml.cs. The other templates may also do this, but I haven't used them so I don't know for sure.
I'm trying to figure out if there is a way to dynamically add controls into another control (I know this is a bit vague...). My program is in C# 4.0, and WPF. Basically, I'm trying to create a datagrid but as opposed to having normal type 'cells' (ie text, hyperlink etc), I need each cell to hold a number of items. I figured that this wasn't possible in the datagrid, so I'm trying to do the following: Using a stack panel, add a variable number of wrap panels. Each wrap panel will contain 7 grids, where each grid will hold the data I want (I'll likely use some user control in place of the grid I think...)
An example of the code I have so far...
<StackPanel Height="559" HorizontalAlignment="Left" Margin="24,11,0,0" Name="tyStackPanel" VerticalAlignment="Top" Width="783">
<WrapPanel Height="100">
<Grid Width="100" Height="100">
</Grid>
</WrapPanel>
<WrapPanel Height="100">
</WrapPanel>
</StackPanel>
Is there a way to create a variable number of Wrap Panels though? (ie like you would have a variable number of rows in a datagrid)
Any help and suggestions is much appreciated!
P.S. Figure I should explain what I'm trying to achieve a bit better. I have a collection of items, each with 5 properties that I want displayed together. These items are grouped by Name (like a row in a data column) and a column header (which is not one of the 5 properties). I want to group the collection by (Name, ColumnHeader) pairs, and then in each "cell" display those 5 properties. In the way I'm trying to set it up above, there would be a WrapPanel per 'Name' and a Cell/Grid contained in it for each ColumnHeader.
WPF supports this very well with the ItemsControl and its various derived controls, one of which is the DataGrid, which actually does support the scenario you're looking for.
Basically, when you use an ItemsControl, DataGrid or one of these item controls, you bind the ItemsSource to whatever property holds your data items, and define the DataTemplates for each item, which can be any arbitrarily-complex block of XAML. For DataGrid, you can swap a normal column for a DataGridTemplateColumn, which can, again, be as complex as you want.
Check out the Data Templating Overview for, well, an overview.
I'm not sure about the best way to implement this in WPF, so I'll state my problem first.
I have a collection of frames. Each frame has two images. Let's say I have 10 frames giving a total of 20 images. I want to show the images at the bottom of the screen organized like a film strip - 2 rows and 10 columns. When the user clicks on one of this images or uses the arrow, it should become selected and the selected image information will be used somewhere else in the application.
I've implemented it as a ListBox with ItemsSource bound to my viewmodel's Frames collection (an observablecollection). In the DataTemplate of the ListBox, I've created a grid with two rows, each one containing a Image control. The one on row 0 is bound to TopImage (a property of my Frame class) and the bottom one is bound to BottomImage.
All this work, but the problem is that when I use the arrows, the whole frame (item) gets selected. How do I select each image in the datatemplate individually?
OR
Is there a better way to implement this>
You have two problems:
You want to separate the selectability of the upper and lower images in a frame
You want the arrow keys to be able to navigate images in two dimensions
If you did not have the arrow key requirement, then you could solve the first problem by nesting ListBox objects inside a parent ItemsControl. But then the arrows only do the right thing within a ListBox. To address that requires a different approach.
Here is a 2x2 grid data-bound to a four-element collection of images. Here we use the little-used UniformGrid to cause the collection to wrap after so many columns. Since we're using an ItemsControl, we lose automatic selection support but we get it back by making the Image control the content of a Button.
<Grid>
<Grid.Resources>
<x:Array x:Type="sys:String" x:Key="sampleData">
<sys:String>http://thecybershadow.net/misc/stackoverflow.png</sys:String>
<sys:String>http://thecybershadow.net/misc/sourceforge.png</sys:String>
<sys:String>http://thecybershadow.net/misc/stackoverflow.png</sys:String>
<sys:String>http://thecybershadow.net/misc/sourceforge.png</sys:String>
</x:Array>
</Grid.Resources>
<ItemsControl ItemsSource="{StaticResource sampleData}" Focusable="False">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="2"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button>
<Button.Content>
<Image Source="{Binding}"/>
</Button.Content>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
The net effect is a 2x2 grid of images that you can freely arrow around between. You can use styling to make the button aspect less button-like without losing focusability. So bind all twenty images to this view, first the top ten and then the bottom ten. You can also bind the column count from the same data source.