UWP Offset GridView Scrollbar - xaml

I am making a Gridview that scrolls behind a title element (which is semi transparent to show the items being scrolled behind it). To do this, I have layered the Grid containing the title and the GridView by placing them both as children in the same Grid.
<Grid>
<GridView>
<!-- Stuff -->
<GridView>
<Grid Height="100">
<!-- Title Content here -->
</Grid>
</Grid>
This works fine, but causes the GridView to display elements initially behind the title. To fix this, I offset the ItemsWrapGrid in the GridView:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Name="ItemsWrapGrid"
Margin="0,100,0,0"
Orientation="Horizontal"
HorizontalAlignment="Center"></ItemsWrapGrid>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
Now the items start as if they are below the title content, and scroll underneath it.
The only remaining problem is the scrollbar for the GridView. The scrollbar still goes to the top of the parent Grid, which means it goes behind the title, even though the items in the GridView themselves begin below the title. This is particularly an issue when there are enough items in the GridView (rows) to cause the scrollbar to be small enough that it is entirely behind the title.
Is there a way to offset the scrollbar similar to the GridView items? Is this the wrong approach?

UWP Offset GridView Scrollbar
For your requirement, you could use VisualTreeHelper to get VerticalScrollBar element, then set Margin = 0,100,0,0 in the GridView load event handler. For detail steps please refer the following code.
public static DependencyObject MyFindGridViewChildByName(DependencyObject parant, string ControlName)
{
int count = VisualTreeHelper.GetChildrenCount(parant);
for (int i = 0; i < count; i++)
{
var MyChild = VisualTreeHelper.GetChild(parant, i);
if (MyChild is FrameworkElement && ((FrameworkElement)MyChild).Name == ControlName)
return MyChild;
var FindResult = MyFindGridViewChildByName(MyChild, ControlName);
if (FindResult != null)
return FindResult;
}
return null;
}
private void TestGridView_Loaded(object sender, RoutedEventArgs e)
{
var scrollBar = MyFindGridViewChildByName(TestGridView, "VerticalScrollBar");
scrollBar.SetValue(MarginProperty, new Thickness(0, 100, 0, 0));
}

Related

UWP: Content dialog width stays the same

I have tried to set the width and also min height and min width but still the dialogue wont change to full screen. tried window.bounds too but teh dialog wont expand beyond a fixed width.
public sealed partial class ContentDialog1 : ContentDialog
{
public ContentDialog1()
{
this.InitializeComponent();
this.MinWidth = Window.Current.Bounds.Width;
}
private void ContentDialog_PrimaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
{
}
private void ContentDialog_SecondaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
{
}
}
}
<ContentDialog
x:Class="PowerUp.UWP.View.ContentDialog1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PowerUp.UWP.View"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="TITLE"
PrimaryButtonText="Button1"
SecondaryButtonText="Button2"
PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
SecondaryButtonClick="ContentDialog_SecondaryButtonClick"
MinWidth ="2000">
<Grid x:Name="cd1" >
</Grid>
This is what I want
This is how content dialog is shown in my application
It is actually very simple, did a bit research and found the simplest answer, you can keep doing what you were already doing in the first place and just set the FullSizeDesired property of your ContentDialog to true.
Popup
Or you can try it with popup.
var c = Window.Current.Bounds;
var okButton=new Button{Content="Ok"};
okButton.Click += okButtonClicked; // now where you have this okButtonClicked event you can execute any code you want including, closing the popup.
var g = new Grid
{
Width = c.Width,
Height = c.Height,
Background = new SolidColorBrush(Color.FromArgb(0x20, 0, 0, 0)),
Children =
{
new StackPanel
{
Width = 400,
Height = 200,
Background = new SolidColorBrush(Colors.White),
Children=
{
new TextBlock{Text="Title"},
new TextBlocl{Text="description"},
okButton
}
}
}
};
var p = new Popup
{
HorizontalOffset = 0,
VerticalOffset = 0,
Width = c.Width,
Height = c.Height,
Child = g
};
p.IsOpen = true; // open when ready
Notice that Child of popup is g which is a grid, you can put your content within this grid or you can use a StackPanel instead of this grid and then put your contents within that StackPanel, whatever you want to do here is your decision, putting elements in popup is exactly like putting elements in a ContentDialog.
Achieving the same with a simple Grid alongside your frame
<Grid>
<Grid Horizontallignment="Stretch" VerticalAlignment="Stretch" Visibility="Collapsed" x:Name="ContentGrid" canvas.ZIndex="5"><--this grid will act as content dialog, just toggle its visibility to the backend-->
<--put all your content here along with your ok and cancel buttons-->
</Grid>
<Frame/> <--this is the code where you have your frame-->
</Grid>
in above code the frame and your actually content grid will be parallel to each other, and whenever content grid is visible only it will be shown in the app because it has ZIndex greater than 0 and your frame will hide behind it, and whenever its visibility is collapsed it will not be shown and you will be able to see your frame normally.

How to make sure a Popup control match its parent Page when the parent is resized? UWP

I have a Popup which will fill the whole page when opened.
<Grid x:Name="gridRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Open" HorizontalAlignment="Center" Click="{x:Bind viewModel.OpenPopup}" />
<Popup x:Name="popupCorrect" VerticalAlignment="Top" IsOpen="{Binding IsOpen}" IsLightDismissEnabled="False">
<Popup.ChildTransitions>
<TransitionCollection>
<PaneThemeTransition Edge="Left" />
</TransitionCollection>
</Popup.ChildTransitions>
<uc:MyPopup Width="{Binding ElementName=gridRoot, Path=ActualWidth}" Height="{Binding ElementName=gridRoot, Path=ActualHeight}"/>
</Popup>
</Grid>
The Popup is a UserControl
<Grid Background="Red">
<Button Content="Close" HorizontalAlignment="Center" Click="{x:Bind viewModel.ClosePopup}" />
</Grid>
The page
When popup is shown
Close the popup, resize the page, then reopen the popup. Notice that it does not match the new size of container page even though its Width and Height is bound to gridRoot . Do I have to manually set a new Width and Height for the popup? Why can't I achieve this with binding? This issue also appears on mobile during 'OrientationChanged'
Based on Decade Moon comment, this is how to resize the popup to match the parent container as its size changed.
Create a dependency property in the code behind
public double PageWidth
{
get { return (double)GetValue(PageWidthProperty); }
set { SetValue(PageWidthProperty, value); }
}
public static readonly DependencyProperty PageWidthProperty =
DependencyProperty.Register("PageWidth", typeof(double), typeof(GamePage), new PropertyMetadata(0d));
public double PageHeight
{
get { return (double)GetValue(PageHeightProperty); }
set { SetValue(PageHeightProperty, value); }
}
public static readonly DependencyProperty PageHeightProperty =
DependencyProperty.Register("PageHeight", typeof(double), typeof(GamePage), new PropertyMetadata(0d));
Update the value on SizeChanged event
private void GamePage_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (e.NewSize.Width > 0d && e.NewSize.Height > 0d)
{
PageWidth = e.NewSize.Width;
PageHeight = e.NewSize.Height;
}
}
Then in XAML, just use x:Bind to bind the popup width and height
<Popup x:Name="popupCorrect" VerticalAlignment="Top" IsOpen="{Binding IsPopupCorrectOpen, Mode=TwoWay}" IsLightDismissEnabled="False">
<Popup.ChildTransitions>
<TransitionCollection>
<PaneThemeTransition Edge="Left" />
</TransitionCollection>
</Popup.ChildTransitions>
<uc:PopupCorrect Width="{x:Bind PageWidth, Mode=TwoWay}" Height="{x:Bind PageHeight, Mode=TwoWay}"/>
</Popup>
Pretty straight forward. Just remember not to use the ActualWidth or ActualHeight properties for binding source as they do not raise the PropertyChanged event.
Although it has an ActualWidthProperty backing field, ActualWidth does not raise property change notifications and it should be thought of as a regular CLR property and not a dependency property.
For purposes of ElementName binding, ActualWidth does not post updates when it changes (due to its asynchronous and run-time calculated nature). Do not attempt to use ActualWidth as a binding source for an ElementName binding. If you have a scenario that requires updates based on ActualWidth, use a SizeChanged handler.
#PutraKg have a great way.
But I have two way to solve it.
The first is set the VerticalAlignment="Center" HorizontalAlignment="Center" that can make the popup in the center.
But I think youare not content to put it in the center.
The great way is use the screen position.
You can get the Grid's screen postion and make it to popup.
In open button
private void Button_OnClick(object sender, RoutedEventArgs e)
{
var grid = (UIElement)popupCorrect.Parent; //get grid
var p = grid.TransformToVisual (Window.Current.Content).TransformPoint(new Point(0, 0)); //get point
popupCorrect.HorizontalOffset = p.X;
popupCorrect.VerticalOffset = p.Y;
popupCorrect.IsOpen = !popupCorrect.IsOpen;
}

How to show the previous page gridview images in flipview control in another page in windows 8?

I am displaying the items in grid view .I want to show the grid view items in another page using flip view control.How to dynamically display the selected item position in second page ?
Please tell me how to achieve this?
EDIT:
In First Page :
Grid View item click event i wrote code like this:
private void PhotoGrid_ItemClick(object sender, ItemClickEventArgs e)
{
var itemid = ((flipimage)e.ClickedItem);
flipimage s = new flipimage() { ImageUrl = itemid.ImageUrl, Title = itemid.Title };
this.Frame.Navigate(typeof(FlipPage), s);
}
In Second Page:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
flipimage s = (flipimage)e.Parameter;
string url = s.ImageUrl;
flipviewcontrol.Items.Add(url);
}
I want to display previous page selected item in second page and also click on next in flipview need to show after that selected item data.Please tell me how to write the code.
For data binding to
flipview :
XDocument xdoc = XDocument.Load("XMLFile1.xml");
IEnumerable<flipimage> images = from img in xdoc.Descendants("Image") select new flipimage(img.Element("ImageTitle").Value, img.Element("ImageUrl").Value);
flipviewcontrol.DataContext = images;
Design of Flipview:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<FlipView HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="flipviewcontrol" ItemsSource="{Binding}">
<FlipView.ItemTemplate>
<DataTemplate>
<Image HorizontalAlignment="Left" Source="{Binding ImageUrl}" Height="762" VerticalAlignment="Top" Width="1360" x:Name="imagecontrol"/>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
Please tell me how to show previous page selected item value and when click on next in filpview need to show after selected items data of the page vice versa!!!

Wrapping/floating items in GridView (XAML) group 'float: left' on topmost item

How do I write the code that flows items in a GridView (XAML-Win8) group, according to the below illustration?
I currently have a custom TemplateSelector that selects a different (larger) template for the first item, but the flow as specified here:
<GroupStyle.Panel>
<ItemsPanelTemplate>
<q42:WrapPanel Orientation="Horizontal" Width="440" Margin="0,0,80,0"/>
<!-- also tried VariableSizedWrapGrid -->
</ItemsPanelTemplate>
</GroupStyle.Panel>
Wraps items 1 through 3 similarly, but then places item 4 at item 6's position, without filling out items 4 nor 5.
Question becomes; how do I write code that acts similar to css:
.item { display: inline-block; }
.item1 { float: left; }
, which would make the items flow like I want?
Andreas Hammar linked me to a working solution:
using System.Collections.Generic;
using Application1.Data;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace Application1
{
public class MyGridView : GridView
{
int _rowVal;
int _colVal;
readonly List<Size> _sequence;
public MyGridView()
{
_sequence = new List<Size>
{
LayoutSizes.PrimaryItem,
LayoutSizes.SecondarySmallItem,
LayoutSizes.SecondarySmallItem,
LayoutSizes.OtherSmallItem,
LayoutSizes.OtherSmallItem, // 5
LayoutSizes.OtherSmallItem,
LayoutSizes.SecondaryTallItem, // 7
LayoutSizes.OtherSmallItem,
LayoutSizes.SecondarySmallItem, // 9
LayoutSizes.OtherSmallItem,
LayoutSizes.SecondarySmallItem, // 11
LayoutSizes.SecondarySmallItem,
LayoutSizes.OtherSmallItem,
LayoutSizes.OtherSmallItem
};
}
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
base.PrepareContainerForItemOverride(element, item);
var dataItem = item as SampleDataItem;
var index = -1;
if (dataItem != null)
{
index = dataItem.Group.Items.IndexOf(dataItem);
}
if (index >= 0 && index < _sequence.Count)
{
_colVal = (int) _sequence[index].Width;
_rowVal = (int) _sequence[index].Height;
}
else
{
_colVal = (int) LayoutSizes.OtherSmallItem.Width;
_rowVal = (int) LayoutSizes.OtherSmallItem.Height;
}
VariableSizedWrapGrid.SetRowSpan(element as UIElement, _rowVal);
VariableSizedWrapGrid.SetColumnSpan(element as UIElement, _colVal);
}
}
public static class LayoutSizes
{
public static Size PrimaryItem = new Size(6, 2);
public static Size SecondarySmallItem = new Size(3, 1);
public static Size SecondaryTallItem = new Size(2, 2);
public static Size OtherSmallItem = new Size(2, 1);
}
}
<local:MyGridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</local:MyGridView.ItemsPanel>
<local:MyGridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="Group Title"
Content="{Binding Title}"
Click="Header_Click"
Style="{StaticResource TextButtonStyle}"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="80" ItemHeight="160" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</local:MyGridView.GroupStyle>
</local:MyGridView>
I think it could be done with a VSWG.
I've gotten halfway there but haven't hade time to finish it...
First you need to set the attached prop VariableSizedWrapGrid.RowSpan and ColSpan - and that has to be set on the item container, by inheriting the VSWG:
http://blogs.u2u.be/diederik/post/2012/03/07/Databinding-to-the-VariableSizedWrapGrid-in-Windows-8-Metro.aspx
And in your case 2x2 for the first item, 1x1 on the rest.
The measuring of cell size is done on the first element, unless you specify the ItemHeight etc explicitly. So you have to accomplish this somehow :)
http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/569e048a-9f5e-4fb3-870a-380de5906e80
WG supports single sized items and all items are shown at that same size. VSWG allows for variable sized items but the item sizes allowed are in integral multiples of the base cell size. WG and VSWG work in layout cells. The size of the layout cell is determined by ItemHeight and ItemWidth properties. If these properties are not set, then the size of the first item is used as the cell size and subsequent items are measured at that size for WG; for VSWG the item is measured in integral multiplication of the cell size based on RowSpan and ColumnSpan properties.
It seems that you have to set the height and width of the VSWG in order to accomodate the size of the largest item if you don't want the item to be first in the list.
--> this is the part that I did not get around to.
Lastly the horizontal orientation.
Good luck!

Let ListView scroll to selected item

I have a WinRT/C#/XAML app with a view that has a vertical ListView of items. Depending on the amount of items the ListView shows a vertical scrollbar. Here's the XAML definition:
<UserControl.Resources>
<CollectionViewSource
x:Name="myViewSource"
Source="{Binding myViewModel.Items}" />
</UserControl.Resources>
...
<ListView
x:Name="myListView"
ItemsSource="{Binding Source={StaticResource myViewSource}}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
</ListView>
Now everytime I navigate to this view, the selected item of the ListView is chosen by setting the databound SelectedItem property in the view model from code behind (OnNavigatedTo). My problem: the ListView doesn't scroll automatically to this selected item. The scrollbar remains at the top of the ListView and the user has to scroll manually to see the selected item.
I tried to execute myListView.ScrollIntoView(MyViewModel.SelectedItem); after setting the SelectedItem in the code behind (in OnNavigatedTo), but it doesn't work. The scrollbar remains at the top.
I'm aware of this thread on SO: Scroll WinRT ListView to particular group .
This seems to be a similar problem. But when I walk the visual tree of the ListView manually or with the WinRT XAML Toolkit, it doesn't find a ScrollViewer (returns null instead).
Thanks to Filip I noticed that calling ScrollIntoView() in OnNavigatedTo() was too early, because the ListView control is not loaded yet in this place.
The first solution idea was to bind the Loaded event of the ListView:
myListView.Loaded += (s, e) =>
myListView.ScrollIntoView(MyViewModel.SelectedItem);
Unfortunately that causes a nasty visual effect, where current ListView items overlap with the selected item for parts of a second, before everything is rearranged well.
The final solution I found is to call ScrollIntoView() asynchronously via the Dispatcher of the view:
myListView.Loaded += (s, e) => Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
() => myListView.ScrollIntoView(MyViewModel.SelectedItem));
With this solution the layouting works fine.
I had a similar need and resolved it in a slightly different manner. I subscribed to the SelectionChangedEvent from the ListView and performed the scrolling within the handler.
XAML:
<ListView x:Name="myListView" SelectionChanged="myListView_SelectionChanged" ...>
</ListView>
Code:
private void myListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
myListView.ScrollIntoView(myListView.SelectedItem);
}