Xamarinの新機能フォーム4.8:グラデーション、ブラシ、および浮揚背景色

私たちの世界は常に進化しており、技術分野では最大の変化のいくつかを見てきました.これの更なる証明は、8月7日に到着しました.フォームを再度更新されました.今、我々は開発者がよりインタラクティブで魅力的なアプリケーションを作成できるように機能のコレクションを提供し、バージョン4.8を持っている.
この記事では、私は新しいXamarinで利用できる2つの特徴に集中するつもりです.フォーム4.8リリース:

Gradients and Brushes

Flyout Backdrop Color

始めましょう!

勾配とブラシ

ために我々のアプリケーションの領域を描画するには、ブラシを使用する必要があります.ブラシ異なる種類の出力を生成するために来る.
利用可能なブラシの種類は以下の通りです.

立体色

線形勾配

放射勾配

立体色

その名前が示すように、我々は我々が固体色で地域を塗ることができます.以下はXAMLコードを使用した例です.

<Frame Background="DarkGreen"
       BorderColor="DarkGreen"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120"/>

このXAMLは次の出力を生成します.
ソースVicente Guzman on GitHub

線形勾配

線形グラデーションブラシは、グラデーションで2つ以上の色を結合することができます.以下のスクリーンショットで緑から黄色の線形勾配を見てください.
ソースVicente Guzman GitHub
線形勾配を使用するには、StartPointプロパティとEndpointプロパティの使用場所を知る必要があります.以前のスクリーンショットでグラデーションを実装したいなら、次のようにコード化します.

<Frame BorderColor="DarkGreen"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
       <Frame.Background>
              <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
               <GradientStop Color="Green" Offset="0.1"/>
               <GradientStop Color="Orange" Offset="1.0"/>
              </LinearGradientBrush>
       </Frame.Background>
</Frame>

放射勾配

xamarinで利用可能なブラシの最後のタイプ.フォーム4.8は、円形のグラデーションで2つ以上の色を混ぜることができるラジアルグラデーションです.前のグラデーションのように、これは2つの特性を決定する必要があります:勾配の中心の位置を指定する中心と勾配の半径の大きさを決定する半径.
次のコード例では、中央に緑色の放射状グラデーションを作成し、エッジで黄色に変わります.

<Frame BorderColor="DarkGreen"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
       <Frame.Background>
         <RadialGradientBrush Center="0.5,0.5" Radius="0.5">
               <GradientStop Color="DarkGreen" Offset="0.1"/>
               <GradientStop Color="Yellow" Offset="1.0"/>
         </RadialGradientBrush>
       </Frame.Background>
</Frame>

このコード例は、次のスクリーンショットに示す出力を生成します.
ソースVicente Guzman GitHub

ドロップアウトカラー

多くのアプリケーションは、ハンバーガーアイコンを通してアクセスされるドロップダウンメニューを特徴とします.前のバージョンのxamarinで.フォームは、私たちは能力を開くときに開くとメニューの外観を編集する必要はありませんでした.オペレーティングシステムによって提供されるデバイスのデフォルトのデザインを使用しなければなりませんでした.
xamarinのおかげで.フォーム4.8、我々はすぐに横顔の背景機能を使用してアプリケーションのメニューの外観をカスタマイズすることができます.
次のGIFはアクションのflyout背景色機能を示します.
ソースVicente Guzman GitHub
あなたは我々がブラシとグラデーションを以前に議論した背景色機能を組み合わせることができるかどうか疑問に思っているなら、答えはイエスです!ブラシを定義し、その値をプロパティシェルに割り当てるだけです.flyoutbackdrop.以下に例を示します.

<FlyoutItem Route="stores"
            FlyoutDisplayOptions="AsMultipleItems">
        <Shell.FlyoutBackdrop>
          <LinearGradientBrush StartPoint="0,0"
                               EndPoint="1,1">
              <GradientStop Color="#8A2387"
                            Offset="0.1" />
              <GradientStop Color="#E94057"
                            Offset="0.6" />
              <GradientStop Color="#58ADF4"
                            Offset="1.0" />
          </LinearGradientBrush>
      </Shell.FlyoutBackdrop>

      <ShellContent Route="stores"
            ContentTemplate="{DataTemplate views:NationalPage}" />
</FlyoutItem>

あなたはxamarinでこれらの新機能の例を見つけることができます.Githubのフォーム4.8 :

Gradients and Brushes

Flyout Backdrop Color

これらの機能の詳細については、マイクロソフトのドキュメントを参照してください.

Brushes and Gradients

Flyout Backdrop Color

結論

このブログでは、Xamarinの2つの新しいカラフルな機能について学んだ.フォーム4.8:グラデーションとブラシ、および浮気の背景色.これらの機能は、私たちのアプリケーションでエレガントな、魅力的なUIを設計するのに役立ちます.
だから、魅力的なxamarinを構築しましょう.これらの新機能をフォームアプリケーション!
Syncfusion DataGrid、チャート、ListView、RTEのような強力な、高度なコントロールに基本的なエディタからXamarinの150 UIのコントロールを提供します.あなたの生産性を高めるためにそれらを使用してください!
現在のSyncFusionの顧客については、最新バージョンはLicense and Downloads ページ.まだSyncFusionの顧客でない場合は、私たちの30日を試すことができますfree trial すべての利用可能な機能をチェックアウトします.また、私たちのサンプルをチェックアウトGitHub ロケーション.
私たちにフィードバックを送信する場合は、下記のコメントセクションを使用してください.また、我々を介してお問い合わせすることができますsupport forums , Direct-Trac , or feedback portal . 我々は常にあなたを支援して満足している!
あなたがこのポストが好きであるならば、我々はあなたが以下のことも好きであると思います:

〔ブログ〕

〔ブログ〕

〔ブログ〕

［電子ブック］Xamarin.Forms Succinctly