UWP Apps relative Panel Tricks

Mit Windows 10 Apps kommen eine Reihe neuer Steuerelemente in dem XAML Code. Meistens wird das Control in Zusammenhang mit adaptiven Design genannt, aber ich habe entdeckt das kann noch ein wenig mehr.

Wer in WPF UI Element anordnen möchte nimmt ein Stackpanel und die Orientation horizontal. Mit dem Relativpanel kuscheln sich die Elemente etwas mehr zusammen. In diesem XAML Beispiel werden drei Icons nebeneinander platziert. Dies kann mit dem Symbolicon oder der neuen Windows 10 Schrift MDL2 geschehen. Im ersten Fall wird das Icon per Rendertransform in der Größe verdreifacht und im zweiten per Fontsize. Jedes  UI Element kuschelt sich per Attached Property Rightof an seinen Nachbarn.

   1:  <RelativePanel Height="375" Margin="125,138,52,0" VerticalAlignment="Top">
   2:       <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE19F;"
   3:                       Name="eins" FontSize="150" />
   4:       <SymbolIcon  Name="zwei" Symbol="AddFriend"  RelativePanel.RightOf="eins"
   5:             RelativePanel.AlignBottomWith="eins" Height="20" VerticalAlignment="Top" 
RenderTransformOrigin="0.5,0.5" >
   6:                  <SymbolIcon.RenderTransform>
   7:                      <CompositeTransform ScaleX="3" ScaleY="3"/>
   8:                  </SymbolIcon.RenderTransform>
   9:        </SymbolIcon>
  10:       <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE722;" Name="drei" 
  11:                        FontSize="50"
  12:              RelativePanel.RightOf="zwei"
  13:             RelativePanel.AlignBottomWith="zwei"/>
  14:   </RelativePanel>

Wie man im Screenshot sehen kann, geht's bis an die Konturen des linken Icons

image

Kommentare sind geschlossen