UWP new Controls – Layout controls

11 בSeptember 2016

אין תגובות

In this post I will passing over some major layout technics for developers who moving forward to UWP environment. This migration from former Windows versions required a short introduction and that my posts about. In for this time: Layout controls
Pivot-Control:
Actually its not new, just replacement to the traditional tab control, with nicer behavior and looks
Code:

<Pivot  Title="My Pivtos">

          <PivotItem Header="Pivot Item 1">

              <Page>

                  <TextBlock Text="some Content "/>

              </Page>

          </PivotItem>

          <PivotItem Header="Pivot Item 2">

              <ListBox Background="Transparent">

                  <ListBoxItem>a</ListBoxItem>

                  <ListBoxItem>b</ListBoxItem>

                  <ListBoxItem>c</ListBoxItem>

              </ListBox>

          </PivotItem>

          <PivotItem Header="Pivot Item 3">

              <TextBlock Text="Content of pivot item 3."/>

          </PivotItem>

  </Pivot>

Result:

image

HubControl:

It like Tab Control but a modern one with assumption of touch screen or multiple device support,
Think about List view which every list item is a Tab Item,
Than you can use master-details to jump fot specific HubSection inside the Hub,
In general every HubSection is List or some page with content.

Code:

<Hub>

          <Hub.Header>

              <TextBlock x:Name="pageTitle" Text="App Header"   />

          </Hub.Header>

          <HubSection Header="Images" IsHeaderInteractive="True">

              <DataTemplate>

                  <GridView x:Name="ImagesGrid"  SelectionMode="None">

                      <GridView.ItemTemplate>

                          <DataTemplate/>

                      </GridView.ItemTemplate>

                      <GridView.ItemsPanel>

                          <ItemsPanelTemplate>

                              <ItemsWrapGrid MaximumRowsOrColumns="3" />

                          </ItemsPanelTemplate>

                      </GridView.ItemsPanel>

                      <ListBoxItem>a</ListBoxItem>

                      <ListBoxItem>b</ListBoxItem>

                      <ListBoxItem>c</ListBoxItem>

                  </GridView>

              </DataTemplate>

          </HubSection>

      </Hub>

Result:

image

SplitView:
SplitView is a Control but should be treated as a panel, it is a wide used in Windows10 apps and also implemented inside Windows itself, like Win10-Setting screens, the left size called Pane and can act in several wais,
With SplitView we can build Master-Details Pattern very easily.
Code:

<SplitView DisplayMode="CompactInline" IsPaneOpen="{Binding IsOn,ElementName=splitController}" OpenPaneLength="150" CompactPaneLength="100">

        <SplitView.Pane>

            <StackPanel>

                <ToggleSwitch OnContent="Close Pane" OffContent="Open Pane" Name="splitController" IsOn="False" />

                <StackPanel  VerticalAlignment="Top" Width="40" HorizontalAlignment="Left">

                    <StackPanel>

                        <Button Content="&lt;" />

                        <Button Content=">" />

                    </StackPanel>

                </StackPanel>

            </StackPanel>

        </SplitView.Pane>

        <SplitView.Content>

            <ContentControl Content="{Binding}" />

        </SplitView.Content>

SplitView>

 

Result:

image

Relative panel:
A  real new Panel (derived from panel class and not just a control)
After we lost some panels in universal apps comparing to WPF presented totally 2 new Controls
The RelativePanel is the very user friendly and designed based on relationship between elements on the panel surface, there are two majority things, related to panel side or corner, and related to elements via x:Name property.

Code:

<RelativePanel>

          <Rectangle x:Name="rect1" Height="100" Width="100" Fill="Red"

                     RelativePanel.AlignVerticalCenterWithPanel="True"

                     RelativePanel.AlignHorizontalCenterWithPanel="True"/>

          <Rectangle x:Name="rect2" Height="100" Width="100" Fill="Blue"

                     RelativePanel.AlignVerticalCenterWithPanel="True"

                     RelativePanel.LeftOf="rect1"/>

      </RelativePanel>

 

Reslts:

image

VariableSizeWrapGrid:Another new Panel it is similar to combination the WPF wrapPanel and uniformGrid,
The very simple basics is to define Orientation than the maximum of columns/rows.
We an see smart property called MaximumRowsOrColumns which effected according to current orientation state
Code:

Code:

<VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3" >

            <Rectangle  Height="100" Width="200" Fill="Red"  />

            <Rectangle  Height="100" Width="200" Fill="Green"  />

            <Rectangle  Height="100" Width="200" Fill="Yellow"  />

            <Rectangle  Height="100" Width="200" Fill="Black"  />

 </VariableSizedWrapGrid>

 

Result:

image

FlipView:
FlipView is nice layout control for collections, it designed foe small devices who present a collection, than by Flipping the screen you can scroll from one full-screen item to another.
Code:

<FlipView Height="100" Width="100">

      <FlipView.ItemTemplate>

           <DataTemplate>

              <Border BorderThickness="2" BorderBrush="Black">

                  <Grid>

                   <ContentPresenter VerticalAlignment="Center"/>

                        </Grid>

                    </Border>

                </DataTemplate>

            </FlipView.ItemTemplate>

            <FlipViewItem>

                <TextBlock Text="AAA"/>

            </FlipViewItem>

            <FlipViewItem>

                <FlipViewItem>

                    <TextBlock Text="BBB"/>

                </FlipViewItem>

            </FlipViewItem>

            <FlipViewItem>

                <FlipViewItem>

                    <StackPanel>

                    <TextBlock Text="CCC"/>

                    </StackPanel>

                </FlipViewItem>

            </FlipViewItem>

        </FlipView>

 

Result:

 

image

הוסף תגובה
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *