New MasterDetailsView control to follow the Master/Details pattern #483

skendrot · 2016-10-17T04:46:35Z

Addresses issue #452. Allows for the user to follow the Master/Details design pattern. Solves the problem of the user having to setup navigation to a details page if on a small device.
Using the control is simple. User sets the ItemsSource, ItemTemplate, and DetailsTemplate

<controls:MasterDetailsView ItemsSource="{Binding Items}"
                            ItemTemplate="{StaticResource ListItemTemplate}"
                            DetailsTemplate="{StaticResource DetailsTemplate}"/>

Allows for binding the SelectedItem to a viewmodel.
Automatic animations for details when an item is selected

dnfclas · 2016-10-17T04:46:39Z

Hi @skendrot, I'm your friendly neighborhood .NET Foundation Pull Request Bot (You can call me DNFBOT). Thanks for your contribution!

In order for us to evaluate and accept your PR, we ask that you sign a contribution license agreement. It's all electronic and will take just minutes. I promise there's no faxing. https://cla2.dotnetfoundation.org.

TTYL, DNFBOT;

dnfclas · 2016-10-17T04:57:52Z

@skendrot, Thanks for signing the contribution license agreement so quickly! Actual humans will now validate the agreement and then evaluate the PR.

Thanks, DNFBOT;

ScottIsAFool · 2016-10-17T06:45:29Z

My initial thoughts on this are that it doesn't allow for non-lists in the master section. For example, a settings page.

skendrot · 2016-10-17T06:49:01Z

The vast majority of use cases involve a ListView. Even the Windows Settings app. The Settings app just happens to also have a search bar and title bar in the "master" section. Better to have someone restyle to put a search bar than have everyone put a list in.

…closing the master pane when in a narrow state. Use Composition animations to animate the details in out.

…does so the app does not navigate back when the event is already handled

…s a header for the master area

…s in narrow state

… control itself to get an accurate size of the presenter

ScottIsAFool · 2016-10-24T17:29:36Z

Microsoft.Toolkit.Uwp.SampleApp/Models/Email.cs

+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;


Remove redundant usings

ScottIsAFool · 2016-10-26T22:56:49Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MasterDetailsView/MasterDetailsViewPage.xaml.cs

+                new Email { From = "OneDrive", Subject = "Check out your event recap", Body = "Your new album.\r\nYou uploaded some photos to yuor OneDrive and automatically created an album for you."},
+                new Email { From = "Twitter", Subject = "Follow randomPerson, APersonYouMightKnow", Body = "Here are some people we think you might like to follow:\r\n.@randomPerson\r\nAPersonYouMightKnow"},
+            };
+            this.InitializeComponent();


Remove instances of "this."

ScottIsAFool · 2016-10-26T23:06:26Z

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MasterDetailsView/MasterDetailsView.bind

+              <TextBlock Text="{Binding From}" Style="{ThemeResource SubtitleTextBlockStyle}" RelativePanel.RightOf="FromEllipse" Margin="12,-6,0,0"/>
+              <TextBlock x:Name="SubjectLine" Text="{Binding Subject}" Style="{ThemeResource BodyTextBlockStyle}" RelativePanel.Below="FromEllipse"/>
+              <TextBlock x:Name="Body" Text="{Binding Body}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="Wrap" RelativePanel.Below="SubjectLine" Margin="0,12,0,0"/>
+              <Button Content="Click ME!" RelativePanel.Below="Body"/>


What's the purpose of this button?

the purpose is to click it ;)
I think I was going to add reply/forward/etc buttons but decided against it. Will be removed

ScottIsAFool · 2016-10-26T23:09:18Z

Microsoft.Toolkit.Uwp.UI.Controls/MasterDetailsView/MasterDetailsView.cs

+        {
+            var view = (MasterDetailsView)d;
+            string noSelectionState = view._stateGroup.CurrentState == view._narrowState
+                ? "NoSelectionNarrow"


I'd be happier if VisualState names/groups and Template child names were constants.

ScottIsAFool · 2016-10-26T23:13:44Z

Microsoft.Toolkit.Uwp.UI.Controls/MasterDetailsView/MasterDetailsView.cs

+            _compositor = _root.Compositor;
+
+            _detailsPresenter = (ContentPresenter)GetTemplateChild("DetailsPresenter");
+            _detailsPresenter.SizeChanged += OnSizeChanged;


If I change the template and change the details presenter in some way (change its name, remove it, whatever), this will crash the control. Should have a null check.

That's intended. The View doesn't function the same without it. Would need to check many other places for null as well. Others have thoughts?

jneidlinger · 2016-10-26T23:32:07Z

Microsoft.Toolkit.Uwp.UI.Controls/MasterDetailsView/MasterDetailsView.xaml

+                                </VisualState>
+                                <VisualState x:Name="WideState">
+                                    <VisualState.StateTriggers>
+                                        <AdaptiveTrigger MinWindowWidth="720" />


I've never been able to track down what the true "best practice" is on window width breakpoints, and it seems everyone does it however they want. That being said, the Windows guidelines pretty clearly denote breakpoints of 640 and below as narrow, 641 to 1007 as medium, and 1008 and greater as large. I'm not sure where these values came from, but they do suggest apps follow them. So, following that, it seems this value should be 641.

To make things more confusing though, the diagram directly above it show different breakpoints, and the header at the top shows a different set of breakpoints altogether.

Thoughts from the Microsoft folks? (@deltakosh, etc)

What's the status on this?

I would say follow the guidelines @jneidlinger pointed to.

OK. Keeping as is:

Those are not the recommended breakpoints though. Those are "example" screen widths. See the circled red area for the recommended breakpoint widths:

@jneidlinger it's the row below it he needs, not the one you circled :)

@ScottIsAFool Fixed. Halloween. :)

Well - I did some more digging, and the specific guidelines for master / detail view do call out using 720 as the breakpoint. I wish the guidelines were a little more consistent.

Haha, looks like it's good to stay as is then.

Conflicts: Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

skendrot · 2016-10-29T05:27:54Z

Still need a doc file. Need to record a gif of the control

ScottIsAFool · 2016-10-29T08:30:59Z

@skendrot didn't you already record one https://twitter.com/skendrot/status/787899417487474689?

skendrot · 2016-10-31T02:40:32Z

No. I uploaded a video to twitter, they turned it into a gif. And I'd rather not use that gif for the repo

deltakosh · 2016-10-31T17:40:05Z

Fix the conflict and we are good to go

Conflicts: Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj

ScottIsAFool · 2016-11-01T16:18:36Z

Are we still waiting for documentation for this?

deltakosh · 2016-11-01T16:18:46Z

Nope we have it

ScottIsAFool · 2016-11-01T16:19:56Z

Ah, sorry, thought the tag was still there :)

deltakosh · 2016-11-01T16:22:29Z

YEAHHH!Congrats @skendrot !

New MasterDetailsView control to follow the Master/Details pattern

4ac5f3d

dnfclas added the cla-required label Oct 17, 2016

Update file headers

15b9c07

dnfclas added cla-signed and removed cla-required labels Oct 17, 2016

Add summary tags for class and ctor

53e290f

skendrot added 5 commits October 17, 2016 17:33

Remove side margin for list item template

bf51237

Add a header object to the master pane

9212863

simplify border between master and details and remove it when narrow

5220c03

Rename unloaded event handler

7514272

Rename variable to match control name

1ca4bf4

skendrot force-pushed the MasterDetailsView branch from 6b05f65 to 1ca4bf4 Compare October 18, 2016 03:07

skendrot added 14 commits October 17, 2016 21:14

Add content to display in the details area when there is no selection

8944b7b

template bind the ItemContainerStyle

dabab3a

use nameof instead of strings for the dependency properties

67870d9

Remove the SplitPane to overcome issues with pushing the back button …

5945684

…closing the master pane when in a narrow state. Use Composition animations to animate the details in out.

Update xml comments

7120a70

Allow other pages to handle the BackRequested event before the Shell …

96968e5

…does so the app does not navigate back when the event is already handled

Remove xaml setting not intended

cc8d2cf

Move border between master/details panels up a level now that there i…

56b60db

…s a header for the master area

Hide the NoSelectionContent when there is no selection and the view i…

cafddef

…s in narrow state

Subscribe to the SizeChanged of the details presenter rather than the…

08007f6

… control itself to get an accurate size of the presenter

Fire the SelectionChanged event when the SelectedItem changes

de6cd44

Rename background property from List to Master

1ba94ed

Allow the user to easily change the default width of the master pane

fa71e8b

Move properties to a separate file to match project standards

60733da

ScottIsAFool reviewed Oct 26, 2016

View reviewed changes

jneidlinger reviewed Oct 26, 2016

View reviewed changes

skendrot added 13 commits October 28, 2016 22:25

Remove unused using

be93ada

add lines between properties

972e104

Correct class name and update xaml for sample

787acd8

Change file encoding

21a3273

remove unused using

930a00c

Remove reference to this

096b991

Remove odd button

d92b3a2

Add constants for elements and states

fe3b2b5

Add TemplatePart attribute for required parts

603401b

Add TemplateVisualState attributes for visual states

c5fc05f

No need for the name to be set

105356e

Add sample that shows the NoSelection capability

100125e

Merge branch 'dev' into MasterDetailsView

278c5a2

Conflicts: Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

Add docs

23bd903

deltakosh removed the need documentation 📃 label Oct 31, 2016

deltakosh added this to the v1.2 milestone Oct 31, 2016

Merge branch 'dev' into MasterDetailsView

2663d99

Conflicts: Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj

deltakosh approved these changes Nov 1, 2016

View reviewed changes

ScottIsAFool approved these changes Nov 1, 2016

View reviewed changes

deltakosh merged commit 0b39573 into CommunityToolkit:dev Nov 1, 2016

New MasterDetailsView control to follow the Master/Details pattern #483

New MasterDetailsView control to follow the Master/Details pattern #483

Uh oh!

Conversation

skendrot commented Oct 17, 2016

Uh oh!

dnfclas commented Oct 17, 2016

Uh oh!

dnfclas commented Oct 17, 2016

Uh oh!

ScottIsAFool commented Oct 17, 2016

Uh oh!

skendrot commented Oct 17, 2016

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skendrot Oct 29, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jneidlinger Oct 26, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jneidlinger Oct 31, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jneidlinger Oct 31, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skendrot commented Oct 29, 2016

Uh oh!

ScottIsAFool commented Oct 29, 2016

Uh oh!

skendrot commented Oct 31, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

deltakosh commented Oct 31, 2016

Uh oh!

ScottIsAFool commented Nov 1, 2016

Uh oh!

deltakosh commented Nov 1, 2016

Uh oh!

ScottIsAFool commented Nov 1, 2016

Uh oh!

deltakosh commented Nov 1, 2016

Uh oh!

Uh oh!

skendrot Oct 29, 2016 •

edited

Loading

jneidlinger Oct 26, 2016 •

edited

Loading

jneidlinger Oct 31, 2016 •

edited

Loading

jneidlinger Oct 31, 2016 •

edited

Loading

skendrot commented Oct 31, 2016 •

edited

Loading