Listview and Drag Item Windows Phone 8.1 - xaml

I'm scruiggling with Windows Phone behavior. And maybe you could help me out somehow.
I want to have a listview from which I can drag items to another Gridview.
So far I got dragging enabled by setting ReorderMode = "Enabled". Doing this has some drawbacks.
1. I'm not able to scroll in my listview anymore
2. I can't select items anymore
3. I don't want the items to be reordered
What I want to have:
1. When holding an item, I want to drag this to another gridview
2. I want still be able to scroll in the listview
3. I still want to be able to select items
Is that somehow possible to do in Windows Phone 8.1?! Can I do my own dragging? Is yes, how should I start?!
Many thanks for any advise

ReorderMode isn't want you want in this case. Here's some basic functionality to do this between two ListViews:
<StackPanel Orientation="Horizontal" Width="800">
<ListView x:Name="ListView1" HorizontalAlignment="Left" DragItemsStarting="ListView_DragItemsStarting" AllowDrop="True" CanDragItems="True" CanReorderItems="True" Drop="ListView_Drop"/>
<ListView x:Name="ListView2" HorizontalAlignment="Right" DragItemsStarting="ListView_DragItemsStarting" AllowDrop="True" CanDragItems="True" CanReorderItems="True" Drop="ListView_Drop"/>
</StackPanel>
ObservableCollection<string> AlphabetList;
ObservableCollection<string> NumberList;
protected override void OnNavigatedTo(NavigationEventArgs e)
{
AlphabetList = new ObservableCollection<string>();
AlphabetList.Add("A");
AlphabetList.Add("B");
AlphabetList.Add("C");
AlphabetList.Add("D");
AlphabetList.Add("E");
AlphabetList.Add("F");
AlphabetList.Add("G");
AlphabetList.Add("H");
AlphabetList.Add("I");
AlphabetList.Add("J");
ListView1.ItemsSource = AlphabetList;
NumberList = new ObservableCollection<string>();
NumberList.Add("0");
NumberList.Add("1");
NumberList.Add("2");
NumberList.Add("3");
NumberList.Add("4");
NumberList.Add("5");
NumberList.Add("6");
NumberList.Add("7");
NumberList.Add("8");
NumberList.Add("9");
ListView2.ItemsSource = NumberList;
}
IList<object> DraggedItems;
private void ListView_DragItemsStarting(object sender, DragItemsStartingEventArgs e)
{
DraggedItems = e.Items;
}
private void ListView_Drop(object sender, DragEventArgs e)
{
ListView ThisListView = sender as ListView;
ObservableCollection<string> AddingOC = (ThisListView.Name == "ListView1" ? AlphabetList :NumberList);
ObservableCollection<string> RemovingOC = (ThisListView.Name == "ListView1" ? NumberList : AlphabetList);
if (AddingOC.Contains(DraggedItems[0])) return;
foreach (string O in DraggedItems)
{
RemovingOC.Remove(O);
AddingOC.Add(O);
}
}

Related

UWP FlipView prevent user interactions

Yes, i have googled for it, this solution doesn't do the trick:
Disable navigation on FlipView
Because i want to remain changing items with animations, but only programmatically.
I have investigated the FlipView template and found that all interactions/animations etc. are built using the ScrollingHost by name:
<ScrollViewer x:Name="ScrollingHost" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}" VerticalSnapPointsType="MandatorySingle" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled">
<ItemsPresenter/>
</ScrollViewer>
So, i have created a custom class MyFlipView and derivered from FlipView, and overrided MouseWheel ( this gives me the needed behavior on desktop ), and deleted navigation buttons from template ( this also limits user interactions ). But the only thing that remains, user is still able to drag the items by pointer ( tablets, phones, maybe even PC with touch screens ). here is my code:
public class MyFlipView : FlipView
{
ScrollViewer scroll;
public MyFlipView()
{
}
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
scroll = GetTemplateChild("ScrollingHost") as ScrollViewer;
scroll.HorizontalScrollMode = ScrollMode.Disabled;
scroll.VerticalScrollMode = ScrollMode.Disabled;
scroll.VerticalScrollBarVisibility = ScrollBarVisibility.Disabled;
scroll.HorizontalScrollBarVisibility = ScrollBarVisibility.Disabled;
scroll.IsHorizontalRailEnabled = false;
scroll.IsVerticalRailEnabled = false;
scroll.IsVerticalScrollChainingEnabled = false;
scroll.IsHorizontalScrollChainingEnabled = false;
scroll.IsHoldingEnabled = false;
}
protected override void OnPointerWheelChanged(PointerRoutedEventArgs e)
{
e.Handled = true;
//base.OnPointerWheelChanged(e);
}
}
As you can see i tried do disable all the scrolling in the ScrollingHost, but still it is possible to switch items on touchscreens. How can i disable them also?
Set the FlipView's IsHitTestVisible property to false.
Then set KeyboardNavigation.DirectionalNavigation to none
Which is basically saying "You can't touch me or tab to me"
Thomas Schneiter's answer would still allow it to be reached via tabbing / other buggy methods of navigation.
If you don't need any interaction with the FlipView, an easy but... well kinda ugly solution is to put a (almost) transparent rectangle on top of your FlipView.
<Grid>
<FlipView ... />
<Rectangle Fill="White" Opacity="0.01" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
Over a year later and still no good solution for disabling FlipView's. Here's what I ended up doing which seems to do the trick without having to create a new FlipView control.
Edit the ControlTemplate and remove all the navigation buttons. Add a transparent background to you DataTemplate container. Add a PointerWheelChanged event handler to the DataTemplate container and have it set e.Handled = true;. Finally, add a SelectionChanged event handler to the FlipView and have it reset the selected item back to the original.
XAML
<FlipView x:Name="MyFlipView" ItemsSource="{x:Bind Items,Mode=OneWay}" SelectionChanged="FlipView_SelectionChanged">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid Background="Transparent" PointerWheelChanged="Item_PointerWheelChanged">
<!--You Item XAML-->
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
<FlipView.Template>
<ControlTemplate TargetType="FlipView">
<Grid>
<!--Default ScrollViewer settings omitted, but no changes needed-->
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
</Grid>
</ControlTemplate>
</FlipView.Template>
</FlipView>
Code Behind
private bool _isDisabled;
private object _selectedItem;
public ObservableCollection<object> Items { get; } = new ObservableCollection<object>();
//methods for setting Items, _isDisabled, and _selectedItem omitted
private void Item_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
//this prevents the wheel from changing the items
e.Handled = _isDisabled;
}
private void FlipView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
//Can't find a way to disable keyboard from changing items so we'll monitor the change and flip it back
if (_isDisabled)
{
this.SetupSelectedItem();
}
}
private void SetupSelectedItem()
{
//do a check here to prevent SelectionChanged events from firing.
if (this.MyFlipView.SelectedItem != _selectedItem)
{
this.MyFlipView.SelectedItem = _selectedItem;
}
}
UPDATE
Ok, TouchScreen was still having some problems so I took another stab at it. There are two levels we need to work on, the FlipViewItem and the FlipView. Unfortunately we have to sub-class these because there aren't any overrides we can do to interrupt the default behavior. I also wanted to use binding to be able to turn the flipping on or off. This only supports Horizontal orientation but can easily be adjusted to support Vertical.
Custom FlipViewItem is needed to control the mouse and keyboard.
public sealed class GalleryFlipViewItem : FlipViewItem
{
public bool IsFlipEnabled { get; set; }
protected override void OnKeyDown(KeyRoutedEventArgs e)
{
e.Handled = !this.IsFlipEnabled;
base.OnKeyDown(e);
}
protected override void OnPointerWheelChanged(PointerRoutedEventArgs e)
{
e.Handled = !this.IsFlipEnabled;
base.OnPointerWheelChanged(e);
}
}
Custom FlipView is needed to control the touch and trickle the setting to the custom FlipViewItem.
public sealed class GalleryFlipView : FlipView
{
public static readonly DependencyProperty IsFlipEnabledProperty =
DependencyProperty.Register("IsFlipEnabled", typeof(bool), typeof(GalleryFlipView), new PropertyMetadata(true, IsFlipEnabledChanged));
private static void IsFlipEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is GalleryFlipView control)
{
if (control.GetTemplateChild("ScrollingHost") is ScrollViewer scrollViewer)
{
scrollViewer.HorizontalScrollMode = control.IsFlipEnabled ? ScrollMode.Auto : ScrollMode.Disabled;
}
if (control.ContainerFromItem(control.SelectedItem) is GalleryFlipViewItem flipViewItem)
{
flipViewItem.IsFlipEnabled = control.IsFlipEnabled;
}
}
}
public bool IsFlipEnabled
{
get { return (bool)GetValue(IsFlipEnabledProperty); }
set { SetValue(IsFlipEnabledProperty, value); }
}
protected override DependencyObject GetContainerForItemOverride()
{
return new GalleryFlipViewItem
{
IsFlipEnabled = this.IsFlipEnabled
};
}
}
Now we need to add the styles for each of these controls. I just copied the default styles for FlipViewItem and FlipView. I made a small adjustment to the FlipView by removing the up/down buttons and added binding to control the left/right button's visibility. To do this, wrap the original button in a grid and then use a converter to convert the bool to a visibility enum.
<Grid HorizontalAlignment="Left" VerticalAlignment="Center" Visibility="{Binding IsFlipEnabled,RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource BooleanToVisibleConverter}}">
<Button x:Name="PreviousButtonHorizontal" Height="36" IsTabStop="False" Template="{StaticResource HorizontalPreviousTemplate}" UseSystemFocusVisuals="False" Width="20" />
</Grid>
<Grid HorizontalAlignment="Right" VerticalAlignment="Center" Visibility="{Binding IsFlipEnabled,RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource BooleanToVisibleConverter}}">
<Button x:Name="NextButtonHorizontal" Height="36" IsTabStop="False" Template="{StaticResource HorizontalNextTemplate}" UseSystemFocusVisuals="False" Width="20" />
</Grid>
Since IsFlipEnabled is a DependencyProperty you can use binding, xaml, or code behind to control it.
<controls:GalleryFlipView IsFlipEnabled="False">
Finally, this seems like the right solution. So frustrating we have to do so much work to simply turn this feature on and off.

ExpanderView will not expand from inside XAML

Previously I ported ExpanderView from Windows Phone toolkit to WinRT ExpanderRT, just to notice now that if you have two ExpanderView controls inside a StackPanel or ListView and you want the first expanderView to be expanded from the beginning by setting the IsExpanded property to True, then first expanderView will overlay the second one.
Here is an example:-
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<local:ExpanderControl
IsExpanded="True"
Expander="This is the expander">
<local:ExpanderControl.Items>
<Button Content="Yes"/>
<Button Content="No"/>
</local:ExpanderControl.Items>
</local:ExpanderControl>
<local:ExpanderControl
IsExpanded="False"
Expander="This is the expander">
<ListViewItem>
<StackPanel Orientation="Horizontal">
<Button Content="yes"/>
<Button Content="no"/>
</StackPanel>
</ListViewItem>
</local:ExpanderControl>
</StackPanel>
</Grid>
After few hours trying to debug the ExpanderView control code i found out that this code is firing 4 times
private void OnSizeChanged(object sender, SizeChangedEventArgs e)
{
if (_presenter == null) return;
var parent = _presenter.GetParentByType<ExpanderControl>();
var gt = parent.TransformToVisual(_presenter);
var childToParentCoordinates = gt.TransformPoint(new Point(0, 0));
_presenter.Width = parent.RenderSize.Width + childToParentCoordinates.X;
}
private void OnPresenterSizeChanged(object sender, SizeChangedEventArgs e)
{
if (null != _itemsCanvas && null != _presenter && IsExpanded)
{
_itemsCanvas.Height = _presenter.DesiredSize.Height;
}
}
During the first 2 times, the _itemsCanvas has a height of 0. While the third time it has a height of 64 just to be overwriten to 0 by the forth time.
I have not find any reason why this is happening. Anyone here can help?
I have faced similar issues after porting Expander from windows phone toolkit.
To fix this issue, I modified OnPresenterSizeChanged logic
private void OnPresenterSizeChanged(object sender, SizeChangedEventArgs e)
{
if (null != _itemsCanvas && null != _presenter && IsExpanded)
{
if (double.IsNaN(_itemsCanvas.Height))
{
VisualStateManager.GoToState(this, CollapsedState, false);
UpdateVisualState(true);
}
else
{
// Already expanded, so we need to update the height of the canvas directly.
_itemsCanvas.Height = _presenter.DesiredSize.Height;
}
}
}
What is different here is that I check if the item canvas has been rendered before or not based on checking if it's height is Nan, if that's the case then I change visual state to collapse without transition then I call UpdateVisualState(true). else I just update the render height of canvas.
The issue was that the first time UpdateVisualState was called, the content presnter was null.

Windows Phone 8.1 Toggling the visibility of a TextBlock in a DataTemplate

I'm building a Windows Phone 8.1 Hub Application. One of the hub section contains a ListView that displays a list of articles. I'd like to add a Textblock to this hubsection which displays a message when the articles failed to download. The XAML Code is below:
<HubSection
x:Uid="ArticlesSection"
Header="ARTICLES"
DataContext="{Binding Articles}"
HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
<DataTemplate>
<Grid>
<ListView
AutomationProperties.AutomationId="ItemListViewSection3"
AutomationProperties.Name="Items In Group"
SelectionMode="None"
IsItemClickEnabled="True"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource BannerBackgroundArticleTemplate}"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
</ListView>
<TextBlock
x:Name="NoArticlesTextBlock"
HorizontalAlignment="Center"
VerticalAlignment="center"
Style="{StaticResource HeaderTextBlockStyle}"
TextWrapping="WrapWholeWords"
TextAlignment="Center"/>
</Grid>
</DataTemplate>
</HubSection>
The problem I'm having is that I can't access the TextBlock from the C# code. Is there an easier way to do this?
The problem I'm having is that I can't access the TextBlock from the C# code.
Yes, since the TextBlock is defined inside a DataTemplate, the TextBlock won't be available until the DataTemplate has been applied. Thus, the x:Name attribute won't automatically generate a variable reference in the InitializeComponent method in your *.g.i.cs file. (Read up on XAML Namescopes for more information).
If you want to access it from your code-behind, there are two ways:
The first way is the simplest: you can get a reference to the TextBlock in the sender argument of the Loaded event handler for that TextBlock.
<TextBlock Loaded="NoArticlesTextBlock_Loaded" />
Then in your code-behind:
private TextBlock NoArticlesTextBlock;
private void NoArticlesTextBlock_Loaded(object sender, RoutedEventArgs e)
{
NoArticlesTextBlock = (TextBlock)sender;
}
The second way is to traverse the visual tree manually to locate the element with the required name. This is more suitable for dynamic layouts, or when you have a lot of controls you want to reference that doing the previous way would be too messy. You can achieve it like this:
<Page Loaded="Page_Loaded" ... />
Then in your code-behind:
static DependencyObject FindChildByName(DependencyObject from, string name)
{
int count = VisualTreeHelper.GetChildrenCount(from);
for (int i = 0; i < count; i++)
{
var child = VisualTreeHelper.GetChild(from, i);
if (child is FrameworkElement && ((FrameworkElement)child).Name == name)
return child;
var result = FindChildByName(child, name);
if (result != null)
return result;
}
return null;
}
private TextBlock NoArticlesTextBlock;
private void Page_Loaded(object sender, RoutedEventArgs e)
{
// Note: No need to start searching from the root (this), we can just start
// from the relevant HubSection or whatever. Make sure your TextBlock has
// x:Name="NoArticlesTextBlock" attribute in the XAML.
NoArticlesTextBlock = (TextBlock)FindChildByName(this, "NoArticlesTextBlock");
}
Jerry Nixon has a good page on his blog about this.

How to access parent page controls in child page(User control)in windows metro apps?

I need to access the mainpage values in usercontrols (child page) in windows 8 metro apps.Please let me know how to do this?
In child page i am trying to access the mainpage controls like this :
DealersPage main = new DealersPage();
Grid grd = main.FindName("visibleGrid") as Grid;
grd.Visibility = Visibility.Collapsed;
But no luck !!!Please tell me
EDIT:In Child Page(usercontrol) on image tapped event i wrote below code.
private void imgClose_Tapped(object sender, TappedRoutedEventArgs e)
{
DealersPage main = this.Parent as DealersPage;
if (main != null)
{
Grid grd = main.FindName("visibleGrid") as Grid;
grd.Visibility = Visibility.Collapsed;
}
settingsControl.Visibility = Visibility.Collapsed;
}
in MainPage (DealersPage) my design like this:
<Grid HorizontalAlignment="Left" Height="758" Margin="0,10,0,0" VerticalAlignment="Top" Width="1366" x:Name="visibleGrid" Opacity="0.85" Background="#FF858585">
<Grid HorizontalAlignment="Left" Height="600" Margin="454,108,0,0" Visibility="Collapsed" VerticalAlignment="Top" Width="500" x:Name="gridpopup">
<local:Settings x:Name="SettingsUsercontrol" Visibility="Collapsed" Height="600" Width="500"/>
</Grid>
</Grid>
From your code, you are NOT actually accessing the main page control in which the user control is present. By using new DealersPage() you are actually creating a new instance of the DealersPage (your main page) on which FindName might return the grid; but that will never be the one that you actually would be looking for.
Your main should be something like (DealersPage)this.Parent which would be the actual parent page.
CODE: Somewhere in your UserControl -
DealersPage main = this.Parent as DealersPage;
if(main != null)
{
Grid grd = main.FindName("visibleGrid") as Grid;
grd.Visibility = Visibility.Collapsed;
}

Blend 4 Passing Data Context with Navigate To

I have a list of customers with various pieces of information. I have a list box with their names. When I select an entry I see more information about the customer on the screen. I want to "Navigate To" another screen when clicking on the user's name with more of their information. I can't figure out how to pass information about the entry to the next screen to accomplish this.
Here is the list box that the user chooses from to begin with.
<ListBox x:Name="scheduleListBox"
ItemTemplate="{DynamicResource ItemTemplate}"
ItemsSource="{Binding Collection}"
Margin="8,8,8,0"
Style="{DynamicResource ListBox-Sketch}"
Height="154"
VerticalAlignment="Top"/>
Here is the TextBlock that could be clicked to go to the other screen. It is changed based on what the user selected from the ListBox.
<TextBlock Text="{Binding Customer}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="150" Margin="104,0,0,0"
Style="{DynamicResource BasicTextBlock-Sketch}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<pi:NavigateToScreenAction TargetScreen="V02Screens.Customer_Status"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBlock>
I'm kind of hoping that there is something I can do in Expression Blend 4 or in the XAML.
In Windows 8, you can pass the entire object to the receiving page.
Like this:
// main page
private void ListBox_SelectionChanged_1
(object sender, SelectionChangedEventArgs e)
{
var _Item = (sender as ListBox).SelectedItem;
Frame.Navigate(typeof(MainPage), _Item);
}
// detail page
protected override void OnNavigatedTo(NavigationEventArgs e)
{
this.DataContext = e.Parameter;
}
In WPF & SL, you can save reference to the SelectedItem in your View Model.
// main page
private void ListBox_SelectionChanged_1
(object sender, SelectionChangedEventArgs e)
{
var _Item = (sender as ListBox).SelectedItem;
MyModel.SelectedItem = _Item;
// TODO: navigate
}
// detail page
protected override void OnNavigatedTo(NavigationEventArgs e)
{
this.DataContext = MyModel.SelectedItem;
}
I hope this helps.
In WPF you can supply an object to the Navigate command which contains anything you want, including whatever data you might want to show on the next page. Then on the target page (the one you navigate to), you have to handle the load completed event.
In your first page you might navigate with...
this.NavigationService.Navigate( somePage, someContainerObject );
Then you might retrieve it on somePage with...
// Don't forget to subscribe to the event!
this.NavigationService.LoadCompleted += new LoadCompletedEventHandler(container_LoadCompleted);
...
void container_LoadCOmpleted( object sender, NavigationEventArgs e)
{
if( e.ExtraData != null )
// cast e.ExtraData and use it
}