how do i get rows and columns dynamically in windows phone app? - windows-phone-8

In my application i need to design the seat layout arrangement in the form of rows and columns dynamically. Please any one suggest me how to get rows and columns and which view i need to use.
this my xaml code
<Grid x:Name="grid" Background="White">
<Button HorizontalAlignment="Stretch" Foreground="Black" Margin="23,56,268,527">Text</Button>
</Grid>
this is .cs code
for (int j = 0; j < jarray.Count; j++)
{
grid.ColumnDefinitions.Add(new ColumnDefinition(){width=new GridLength(30)});
grid.RowDefinitions.Add(new RowDefinition(){ Height = new GridLength(30) });
}
but Iam getting empty page.
Thank you in advance.

Updating suggestion here:
you can use Grid Layout. Create a Grid in XAML and define Rowdefinition and ColumnDefinition dynamically in code behind and append to grid. If your xaml has Grid with name "grid" then in code behind you can rows and column like this. You can use loop for more number of rows and cols.
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.RowDefinitions.Add(new RowDefinition());
Below are few links for ref:
https://social.msdn.microsoft.com/Forums/windowsapps/en-US/17093c72-cfce-40a2-a296-718b741b50da/how-to-dynamically-create-and-fill-grid-or-grid-view-from-c-not-xaml-becouse-i-am-dynamically?forum=winappswithcsharp
Creating RowDefinitions and ColumnDefinitions in code

Related

Did ListView reordering stop working on Windows 10 RT apps?

I've got a simple ListView in my Windows 8.1 app running on Windows 10 (version 1511, build 10586.36):
<ListView
x:Name="ItemListView"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
ItemsSource="{Binding Items, Mode=OneWay}"
ItemTemplate="{StaticResource ItemTemplate}"
TabNavigation="Local"
SelectionMode="None"
AllowDrop="True"
IsSwipeEnabled="True"
CanReorderItems="True"
Padding="0"
Margin="10"
/>
My ViewModel just has a simple ObservableCollection of Items in it, and I'm using MVVMLight for the RaisePropertyChanged() implementation:
private ObservableCollection<Item> items;
public ObservableCollection<Item> Items
{
get { return items; }
set {
var oldVal = items;
items = value;
RaisePropertyChanged("Items", oldVal, items, true);
}
}
When I instantiate the ViewModel and set it to the Page's DataContext, I set up a List of Items, which have numbers in them (1 to 6) so I can see the difference between them and see whether or not the functionality is working properly.
The goal here is to reorder the Items by dragging the row from one place in the ListView and dropping it in another. Reading the docs, this should work, and indeed it did as of a month ago. I don't believe I've changed anything about the code since I last saw it working. (I know, this is a claim that's hard to swallow.)
Now, what happens is that you can drag items and drop them in a different spot, but they pop back to their original position. In other words, items can be dragged to different positions in the ListView, but they revert to their original position when dropped.
I suspect that a recent Windows 10 update broke this functionality (as it did with CurrentApp.LicenseInformation), but if anyone out there sees something here that I'm doing wrong, I'd appreciate knowing what it is.
It's a known issue with Windows 10 build 10586 that is currently being investigated.
Follow https://social.msdn.microsoft.com/Forums/windowsapps/en-US/49a84f9f-69d7-4304-9cb7-ac44fd570252/w81-listview-canreorderitems-functionality-broken-in-windows-10-build-1511?forum=wpdevelop for details.

Show a page inside a Page in windows phone app

Is it possible to show a PhoneApplicationPage inside another PhoneApplication page.
For example if i loaded page1 of the application using the below code from HomePage.xaml
NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.RelativeOrAbsolute));
And i want to show a new page say Page2.xaml , i can Navigate to this page using the same above code , but i dont want to open it as a seperate page , but rather wants to Open the Page2.xaml inside Page1.xaml itself as either popup or some other way , so when user closes Page2 it will show the Page1 in the state
If you use a UserControl instead of a Page, you can turn its visibility on/off (instead of navigating).
No you can't like Igor Kulman said. But you can bind all the content and change page as you want with new data.(Title / Content / grid / all :) )
Unfortunately, you can not declare 2 PhoneApplicationPage tags in a single page. Still you could try some tricks .
You can make the dummy of a PhoneApplicationPage Like this
if this is your layoutRoot
<Grid x:Name="LayoutRoot" Background="Transparent">
</Grid>
then you can make 2 pages in a single layoutroot tag and control their Visibility accordingly.
Just remove the row definitions and put two stackpanels. Now these stackpanels spans over the complete grid.
Something like this helps
<Grid x:Name="LayoutRoot" Background="Transparent">
<StackPanel Name="Page1" Background="Red" Visibility="Visible"/>
<StackPanel Name="Page2" Background="Black" Visibility="Collapsed"/>
</Grid>
Below are the two images which describes your solution better.
Making the first stackpanel Visible
Making the Second stackpanel Visible
Hope it Helps

How to ReStyle Pivot Header

I have recently come across an interesting app and I would like to somewhat modify my solution to resemble their Pivot Header Template. The app can be seen here http://www.windowsphone.com/en-us/store/app/fhotoroom/acad1eed-3149-4b6c-bc4b-8567f409e3e0
where as a user swipes between pivot items the icons in the top right are highlighted accordingly. I have referenced a solution where the icons are paths and as the user swipes between pivot items the icons change colors. The only thing is, I would like to show icons on the right, while on the left the name changes to the respective pivot header name (but only show a single name at a time). I'm kind of lost on how to start this. My thoughts were, get a pivot style copy from blend into the apps page, and then somehow retemplate this so that icons show on the right while the name is on the left. Am I thinking of this correctly? How might I start changing the style to reflect something like this? Is there a better way?
I think pivot header doesn't match behavior that you want to achieve. By default every single pivot item has its own header, and if I don't misunderstand, in this case you got one header for whole pivot control, with displayed text and highlighted icon in the header changes according to active pivot item.
If that is the case, it will be easier to remove the pivot header. Then create a single element on top of the page as pivot header. Bind selected pivot index to a property in model. Then bind the text in the header element to a property that return different string based on selected pivot index. Use similar data-binding concept for highlighting icon (you already have referenced solution for this one). Example :
<Grid Background="DarkBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding HeaderText}" Foreground="White"
FontSize="40" Margin="10,5,5,5"/>
<StackPanel Grid.Column="1" Orientation="Horizontal">
<!--Some icons here-->
....
</StackPanel>
</Grid>
<phone:Pivot SelectedIndex="{Binding PivotIndex, Mode=TwoWay}" Grid.Row="1">
<phone:PivotItem>
...
</phone:PivotItem>
....
</phone:Pivot>
And in the viewmodel :
private int _pivotIndex;
public int PivotIndex
{
get { return _pivotIndex; }
set { _pivotIndex = value; NotifyPropertyChanged("PivotIndex"); }
}
public string HeaderText
{
get { return GetHeaderByIndex(PivotIndex); }
}
private string GetHeaderByIndex(int pivotIndex)
{
switch (pivotIndex)
{
case 0:
return "#recent";
case 1:
return "#favorite";
default:
return "";
}
}
How about that, or is that not the case?
NOKIA made a really good tutorial how to do this. You can go trough the tutorial or just download the code at the bottom of the page.
Tabbed interface with Pivot animation for Windows Phone

Longlist selector with Checkboxes

I am developing app in WIndows phone 8 and using LLS with this data template..
<phone:LongListSelector Name="longlist">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding property1, Mode=TwoWay}" Content="Hii" Checked="CheckBox_Checked_1" Unchecked="CheckBox_Unchecked_1"/>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
While I checked one and scroll list the checkbox selection is changed suppose I select first it shows up me 2 is selected or no-one is selected means behave differently..I am using code in .CS in this link...
http://pastie.org/7938678
please suggest me how can I get rid off this problem..
That is by design. You just tapped a check box inside a list item, thereby selecting it.
I suggest you don't rely on list selection position changed, use another event like Tap instead in your DataTemplate to drive any actions you have based on a list item.
If you want only 1 Item selected at a time use a RadioButton instead of a CheckBox. After this you need to define the GroupName Property.
See the code of my answer below:
How to highlight a selected item in the LongListSelector on WP8?

Accessing named controls from page resources

I needed to access to the ActualWidth of a Border that didn't have a specified Width. I have been told that I can't do that on WinRT so I used a proxy from Florian-Gl (from here).
The thing is that I need to create that proxy on the page's resource like this:
<Page.Resources>
<utils:ActualSizePropertyProxy Element="{Binding ElementName=noteBorder}" x:Name="proxy" />
</Page.Resources>
The problem is that I don't have access to that noteBorder element from the resources, but I have access to pageRoot that is the Page itself.
I guess that I can play with ElementName / Path to get access to noteBorder.
But there is some curious stuff:
The structure is something like:
Page (pageRoot) > Grid > ListView > ListView.ItemTemplate > Grid > Border (noteBorder)
So, If I create the proxy at the same level of the border, It won't run but If I change the ListView to a ItemsControl, it will run and works as expected.
If having it at the same level of the border I change the ElementName to pageRoot it will run at least.
So, It won't run if I put noteBorder (even when I have access to it) if I'm using a ListView, but will work on a ItemsControl, On the other hand, If I have pageRoot it works all ways.
So the question is: Is there a way to access noteBorder from resources? Or maybe a way to access it from another place but working :P
You should be using an Item Template --
By the time you get to
pageRoot) > Grid > ListView or Items Control
At this point in the structure, you're at the element you really want to get at, which is the container of the items that will need the border you are trying to access.
You should define an Item Template and assign the ListView's (or ItemsControl's) ItemTemplate property via binding.
<ListView x:Name="myListView" DataContext="{Binding ToElementIfNotInheritedFromParent}" ItemsSource="{Binding ViewModelListBeingBoundTo}" ItemTemplate="{Binding Source={Static Resource MyCustomItemTemplate}}" />
Where MyCustomItemTemplate is something like
<DataTemplate x:Name="MyCustomItemTemplate">
<Border x:Name="myBorder" >
<StackPanel>
<TextBlock Text="{Binding Path=Title}" />
<TextBlock Text="{Binding Path=FirstProperty}"/>
<TextBlock Text="{Binding Path=SecondProperty}"/>
</StackPanel>
</Border>
</DataTemplate>
Then In your Codebehind (or if ViewModel use the code behind to pass the ListView object to the ViewModel)
DataTemplate dt = this.myListView.Items[indexOfChoice].ItemTemplate as DataTemplate;
Border b = dt.LoadContent() as Border;
int actualWidth = b.AcutalWidth
OR
You can create a FindControl() method that runs recursively to extract the actual control within the border, for instance if you wanted to access one of the Textboxes.
The code for that is here:
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/a612f5a6-e05e-4b68-a813-893eeda159cc