Can we use longlistselector inside a popup in Windows phone 8? - windows-phone-8

How to use longlistselector inside a popup control?
If not possible, then any other way to show longlistselector/listbox as a popup ?

As a popup you can you CustomMessageBox. Instances of CustomMessageBox have property Content, that has no differences from the Content property of any other content controls. So you can put there LongListSelector or ListBox or whatever you want (even Pivot and Panorama), than call Show method. CustomMessageBox will close if user'll click one of the 2 default buttons, but you can hide them (properties IsLeftButtonEnabled and IsRightButtonEnabled) and close CustomMessageBox by your own logic by calling Dismiss method. There is a couple of useful events: the most useful is Dismissed, that raises right after CustomMessageBox get closed (dismissed), its handler contains DismissedEventArgs, that has result of users choiсe (right or left button was chosen, if they were on the screen) and of course sender (CustomMessageBox). If you want some logic after CustomMessageBox closing, use Dismissed event, Show method won't stop program flow.
This is the easiest way to show something. It's not a popup, but it behaves like it.
But if you wont to use popup ifself, there is Child property for you, put there Grid, and ListBox inside the Grid. But you have to set the values of the Width and Height of popup Child.

You can create a new Page and simply put your LongListSelector in it.
For example (Page is called MyPopupPage):
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<con:LongListSelector x:Name="LongListSelector">
<con:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</con:LongListSelector.ItemTemplate>
</con:LongListSelector>
</Grid>
Then fill it with whatever you want (Refer to: http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj244365(v=vs.105).aspx)
In your MainPage (the page which should open the popup):
Create an object of type Popup like:
Popup LLSPopup = new Popup();
And create a Method to set the MyPopupPage as the overlay of the popup:
private void ShowPopup()
{
MyPopupPage ovr = new MyPopupPage();
this.LLSPopup.Child = ovr;
this.LLSPopup.IsOpen = true;
}

Related

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

LongListMultiSelector - can you Suppress the Default Tap Behaviour that puts List into edit mode?

Ok, I hope this doesn't have an embarrassingly obvious answer, but I could not find a solution through searching.
I'd like my longlistmulti to function basically like the Mail app, i.e. having the "select" appbar button put the list into Edit mode, so you can perform operations on it.
However I'd like to suppress the behavior where the list is responding to a tap on the left side of any of the items, that first 10% part of the item's width, that puts the List in the Edit mode.
I have a button as part of the item template, that is pretty flush against the left side, that I need as a trigger for it's own event handler for each item.
So I just want to block the event that is putting it into edit mode via tapping on items. Hope this can be done.
Steve
A quick addit'l note: I'd like to suppress this default behavior regardless, even if I do decide to not have that button as my final implementation.. i didn't want to factor that button as a permanent consideration.
You have a couple of options here. One is handling the IsSelectionEnabledChanged event, and the other is modifying the control template. If you want to place the list into edit mode yourself, I'd suggest using the template modification method, as the event handler might be a bit convoluted when it comes to determining where the change event came from.
From the Document Outline pane (CTRL+W, U to make visible), right click your list control, and navigate to Edit Additional Templates => Edit ItemContainerStyle => Edit a Copy... Use the dialog to name and place the template in your preferred resource dictionary. Look for the rectangles named InnerHintPanel and OuterHintPanel and delete them. This will remove the hit area for activating edit mode. The XAML for these rectangles is reproduced below.
<Grid HorizontalAlignment="Stretch">
...
<Rectangle x:Name="InnerHintPanel" Grid.Column="0" Width="24"
Height="{TemplateBinding HintPanelHeight}"
HorizontalAlignment="Left"
Fill="Transparent"
StrokeThickness="0">
<Rectangle.RenderTransform>
<CompositeTransform TranslateX="24"/>
</Rectangle.RenderTransform>
</Rectangle>
...
</Grid>
<Rectangle x:Name="OuterHintPanel" Width="24"
HorizontalAlignment="Left"
Height="{TemplateBinding HintPanelHeight}"
Fill="{TemplateBinding Background}"
StrokeThickness="0" Opacity="0.0"/>
You should probably delete all storyboard animations that have Storyboard.TargetName set to one of these elements' names as well, otherwise the transition in control state will cause exceptions if you enter edit mode and those elements cannot be found.

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?

How to force keyboard not overlap the stack panel

I am new to WP development and trying to get hands-on.
If you look at wallet pin screen, focus is automatically set to textbox so that user can start typing and also the keyboard does not hides/overlaps done & cancel button.
Also, If you hit back key, those buttons remain at bottom as shown below.
I am also trying to have same kind of UI. However, In my case
I am not able to set focus to textbox as soon as page is loaded. I
can't get .Focus() method of textbox in OnNavigatedTo event. Where
should i do this ?
When i manually tap textbox to enter a value, the keyboard overlaps
my stackpanel containing 'save' & 'cancel' button as shown below. I
don't want this to happen. Instead the screen should look like as
shown in 2nd image.
Below is the XAML code i tried.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<TextBlock Name="txtLimit" TextWrapping="Wrap" Text="Enter the value" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBox AcceptsReturn="True" InputScope="Number" />
</StackPanel>
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center" Orientation="Horizontal" >
<Button Content="save" Width="200" />
<Button Content="cancel" Width="200"/>
</StackPanel>
</Grid>
For setting the focus for first time navigation you apparently have to set this in the Loaded event handler.
For back navigation (from when you application is switched away), the one in OnNavigatedTo will fire as you'd expect.
// Constructor
public MainPage()
{
InitializeComponent();
this.Loaded += (sender, args) => this.textBox.Focus();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
this.textBox.Focus();
}
However you will need to add your buttons to the ApplicationBar to show below the on-screen keyboard.
However the SDK doesn't allow use of rectangular buttons in the application bar, only icon buttons.
In the OnNavigatedTo method, can you try to use the Dispatcher like this :
Dispatcher.BeginInvoke(()=>{
this.textBox.Focus();
});
And, as pointed out, you can NOT have rectangular buttons in the appBar but you can use standard one (like the linked in button for example).

Force GridView To Create Not Recycle Controls

I have a GridView in a windows store app that has an ItemContainerStyleSelector. Within the style is an Image control that has a custom dependency property to set the source (This is so I can get a handle on the Image and hook up to the unloaded event).
My issue is the Image is never unloaded and seems to be reused. This means that when I set the source, the image is set on other items in the GridView as well (For Example I have an object which has no image but after scrolling away and then back again it has an image from another object).
I've tried to set virtualization mode to standard where I can but it doesn't help. Any ideas would be greatly appreciated.
Here is the Image that is contained in the style. This is passed to a method "OnRemoteURISourceChanged" when set. I'd expect a different image control whenever the method is called but this is not the case.
<Image x:Name="BackgroundImage" DataContext="{Binding CurrentBackdrop}" helpers:ImageExtensions.RemoteURISource="{Binding Uri}" Stretch="UniformToFill"/>
And here is my GridView
<GridView x:Name="ItemsGrid" Grid.Row="1" ItemsSource="{Binding BrowseResults}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" Margin="20,0,20,0"
IsItemClickEnabled="True" ItemClick="ItemsGrid_ItemClick" VirtualizingStackPanel.VirtualizationMode="Standard">
<GridView.ItemContainerStyleSelector>
<controls:UPnPCDStyleSelector CDObject="{StaticResource somestyle1}" Container="{StaticResource somestyle2}" Item="{StaticResource somestyle3}"/>
</GridView.ItemContainerStyleSelector>
<GridView.ItemsPanel>
<ItemsPanelTemplate VirtualizingStackPanel.VirtualizationMode="Standard">
<WrapGrid Orientation="Vertical" VirtualizingStackPanel.VirtualizationMode="Standard"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
UPDATE: The issue appears to be the WrapGrid. If I change this to a VirtualizingStack Panel and set the VirtualizationMode to Standard then everything works as expected but obviously my items then only appear on one line and not multiple lines as I wish.
How do I set the virtualization mode of a WrapGrid?
Is there a chance your helpers:ImageExtensions.RemoteURISource doesn't clear the Image.Source when either your CurrentBackdrop property or its Uri property value is null?
Are you sure the task which is loading the img source returns to default ui context when awaiting? I don't think it is a good idea to set Image.Source property form code. The better solution would be to create a custom observable task class and bind im source to it's result. In the background you can call the task. Do you need the control to be Image? Because if it would be a control with template, it would be easier for you to do that. I can send you the class which does that if you want to.