Silverlight-constrained-vs-unconstrained

提供:Dev Guides
移動先:案内検索

制約対 制約のないレイアウト

Silverlightのレイアウトは、常に2つのモードのいずれかで発生します。ConstrainedまたはUnconstrainedのいずれかです。 制約付きレイアウトは、コンテナが幅または高さを課すレイアウトです。 たとえば、通常CSSを使用するWebブラウザーは、Silverlightプラグインの全体的なサイズを常に決定します。

いくつかの重要な機能は-

  • 最上位要素のレイアウトは、水平および垂直の両方に制約されます。 生成するレイアウトが何であれ、常にブラウザによって課されるサイズの結果になる必要があります。
  • 一部の要素は Unconstrained Layoutになります。これは、要素が独自のサイズを自由に選択できることを意味します。 たとえば、垂直 StackPanel 内の要素は垂直に制約されていません。
  • StackPanelは、必要な高さを与えます。 実際、十分なスペースがない場合でもこれを行います。 要素に必要な高さがあることを伝え、適合しないものはすべて切り取ります。
  • ほとんどのSilverlightユーザーインターフェイスには、これら2つのレイアウトスタイルが混在しています。 親が制約を課すかどうかに関係なく、 StackPanel は常にスタッキングの方向に Unconstrained レイアウトを実行します。 高さまたは幅が Auto に設定されている場合、グリッドの行または列にも同じことが当てはまります。

水平方向の幅を固定するコンテナ内にある要素があるとします。 デフォルトでは、スペースを埋めるために要素が引き伸ばされます。 配置を左、右、または中央に設定すると、制約が削除されます。

Constrained Unconstrained

要素は、必要な幅のみを取ります。もちろん、幅または高さを固定した制約を導入できます。

  • 制約のない要素のサイズは通常、コンテンツによって決定されるため、制約のないレイアウトは「コンテンツに合わせたサイズ」と呼ばれることもあります。 *コンテンツのサイズは、Silverlightレイアウトの重要なアイデアです。 表示されている情報にレイアウトが適応できるようにするものです。
Sr. No. Controls & Description
1

GridSplitter

制約は、含まれているブラウザ、またはデザインの固定寸法から発生します。 ただし、ユーザーに制約を課すと便利な場合があります。

2

ScrollViewer

一部のユーザーインターフェイスでは、使用可能なスペースに収まらないほど多くの情報を表示する必要があります。 これに対する一般的な解決策の1つは、スクロール可能な領域を提供することです。 Silverlightは、ScrollViewerでこれを非常に簡単にします。

3

Border

ユーザーインターフェイスをレイアウトするときに留意すべきもう1つの有用な要素は、Borderです。

全画面モード

Silverlightプラグインは、画面全体を引き継ぐことができます。 ヘルパークラスに設定して、フルスクリーンモードに移行できるプロパティがあります。 ただし、セキュリティのためにいくつかの制約があります。 Webサイトが自由に画面を引き継ぐことを防ぎ、ユーザーのパスワードを要求するプロンプトを偽造するなどの悪事を行うため。

全画面モードに入るには、アプリケーションオブジェクトからHost.Contentプロパティを取得し、そのIsFullScreenプロパティをtrueに設定する必要があります。

プロパティを切り替える簡単な例を見てみましょう。これにより、全画面表示と通常表示の間で前後に切り替わります。

<UserControl x:Class = "FullScreenExample.MainPage"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d"
   d:DesignHeight = "300" d:DesignWidth = "400">

   <Border BorderBrush = "Gray" BorderThickness = "4" CornerRadius = "30" Padding = "20">

      <Border.Background>
         <LinearGradientBrush StartPoint = "0,0" EndPoint = "0,1">
            <GradientStop Offset = "0" Color = "Wheat"/>
            <GradientStop Offset = "1" Color = "BurlyWood"/>
         </LinearGradientBrush>
      </Border.Background>

      <Grid x:Name = "LayoutRoot">
         <Button x:Name = "fullScreenButton" HorizontalAlignment = "Center"
            VerticalAlignment = "Center" FontSize = "30" Width = "300"
            Height = "100" Content = "Go Full Screen" Click = "Button_Click"/>
      </Grid>

   </Border>

</UserControl>

以下は、フルスクリーンから通常への復帰を開始するC#のコードです。* Host.Content オブジェクトの *FullScreenChanged イベントを処理することで、これがいつ起こるかを知ることができます。

using System;
using System.Windows;
using System.Windows.Controls;

namespace FullScreenExample {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
         App.Current.Host.Content.FullScreenChanged += Content_FullScreenChanged;
      }

      void Content_FullScreenChanged(object sender, EventArgs e) {

         if (Application.Current.Host.Content.IsFullScreen) {
            fullScreenButton.Content = "Return to Normal";
         } else {
            fullScreenButton.Content = "Go Full Screen";
         }
      }

      private void Button_Click(object sender, RoutedEventArgs e) {
         var content = Application.Current.Host.Content;
         content.IsFullScreen = !content.IsFullScreen;
      }

   }
}

上記のコードをコンパイルして実行すると、次の出力が表示されます。

フルスクリーンモード

ユーザーが[全画面表示]ボタンをクリックすると、全画面表示モードに切り替わります。

フルスクリーンボタン

ボタンのテキストが変更されていることに注意してください。 現在、 Return to Normal と表示されています。 もう一度クリックするか、Escapeキーを押すと、全画面モードから復帰します。