Showing posts with label ListView. Show all posts
Showing posts with label ListView. Show all posts

Sunday, April 8, 2018

Can you place a ScrollViewer inside another ScrollViewer in a UWP project?

Yes, as long as the feature is supported.

A ScrollViewer enables content to be displayed in a smaller area than its actual size. When the content of the ScrollViewer is not entirely visible, the ScrollViewer displays scrollbars that the user can use to move the content areas that is visible. The area that includes all of the content of the ScrollViewer is the extent. The visible area of the content is the viewport.

The following contain a ScrollViewer in their templates:

ListView
GridView
TextBox
RichEditBox

In this post you will see a ScrollViewer inside a GridView. The ScrollViewer has two contents, an Image and a TextBox.

The TextBox has its own ScrollViewer with only horizontal scrolling. The default text which is 'Rose' changes to a longer sentence (Event: ViewChanged="SV_ViewChanged") which can be scrolled using your finger or, with the left/right arrow keys when the cursor is anchored in the text box.

The image and the text as a whole can be scrolled both vertically and horizontally.

Here is the project's design view. The default text is 'Rose':


Here is the XAML of the project.

The following is the image when deployed to Local. Notice that the event fired and text box content has changed and the text in the textbox can be scrolled.


This is when deployed to a 4" emulator.

!!I am still trying to figure out why there is a white strip at the top of the image in emulator.


Sunday, February 11, 2018

How do you code for XAML ListView's SelectionChanged event?

In my previous post (UWP: XAML's ListView Control and its SelectionChanged event - Part 1) you learnt the following:

Part 1
  • Progressively build a ListView Control 
  • Place ListViewItems inside a ListView's ItemTemplate
  • You will place three named ListView items
In this part you will learn how to write code to change the properties you set for the ListViewItems by the SelectionChanged event.

The following image shows the app after a successful run. This displays how the app is displayed at this stage:

              
JListView_23

This next image shows the effect of the SelectionChanged event.


JListView_28

You could set the FontSize properties in design as shown.To start with all the ListViewItem's FontSize was 15px and FontFamily Segoe UI (defaults). Clicking the ListViewItem for 'Dog', you can change its size in the property box (now focus is on 'bird').


JListView_15

As shown in the next image, you insert 'SelectionChanged' inside the ListView. If you just type the letter S, you should get a selection list in which you will find 'SelectionChanged'.


JListView_17

Place the "=" sign after it and you should get the "New Event Handler" and when you click this you will create the ListView_SelectionChanged event.


JlistView_18

In the code behind (MainPage.xaml.cs), the new event is displayed as shown


JlistView_19

We will go back to Design view and name the ListViewItems (lvi1,lvi2 and lvi3) as shown here. It makes it easier to handle in code.


JlistView_21

We change the FontSize of the first ListViewItem as shown here using a single line of code.


JlistView_22

Build, deploy and run the app in the Local Machine and you will see the app displayed as shown.


JlistView_23

Now click any of the ListViewItems and you will see this:



JlistView_24

In order to see the changes in the other ListViewItems you need to add more code as shown:


JlistView_26

Now after building, deploying and running, you see the following:


JlistView_28