XAMLのお勉強メモ ③

おつかれさまです。ざわです。
 少し前からXAMLで試してみたことをメモっています。

メモ①、メモ②（←リンク貼っときます）

動作環境

　・Windows10

　・Microsoft Visual Studio Community 2022 Preview 7.0

　・Xamarin.Forms

今回試してみたこと

　今回は ちょっとデザインに凝ってみようかなと思い、以下を試してみました。

1. 背景にグラデーションを使用
2. パスマークアップ構文を使用して図形やアイコンを描画
3. 円の描画

　出来上がった画面はこちら。

　MainPage.xaml はこのようになりました。
　

　1. 背景にグラデーションを使用

GridにBoxView(*)を配置し、BoxView に LinearGradientBrush（線形グラデーション）を使って色設定しています。 

（* 単色の四角形を描画するために使用されるビュー） 

<BoxView Grid.RowSpan="3">

    <BoxView.Background>

        <LinearGradientBrush>

            <GradientStopCollection>

                <GradientStop Color="LightPink" Offset="0.0"/>

                <GradientStop Color="Beige"  Offset="1.0"/>

            </GradientStopCollection>

        </LinearGradientBrush>

    </BoxView.Background>

</BoxView>

 

　2. パスマークアップ構文を使用して図形やアイコンを描画

画面上部の図形 と 画面下部のアイコンは、PathオブジェクトのDataプロパティに設定して描画しています。
  

■ 図形の部分

<Grid>

    <Path Data="m233.99998,234.8062l332.00003,0l0,111.96579c-161.40468,-114.40217 -140.04514,13.45784 -332.00003,18.42181l0,-130.38759z"

            Aspect="Fill" Fill="LightPink"/>

</Grid>

図形の加工と設定値の取得には、Method Draw Vector Editor を使いました。
Method Draw Vector Editor の使い方は、
　1) 左側のツールパネルから[Shape Tool] →[Flowchart]で図形を選択し、Canvasに配置

　2) 図形をダブルクリックすると編集可能になるので任意の型に加工

 　

　3) 加工し終わったら、画面上部のメニューバーで[View]→[Source]を選択

　4) ソースから<path>の"d=～"の ～部分をコピーして、xamlの<Path Data＝～>に貼り付ける

 

 

■ アイコンの部分 

<Path Fill="#99524e" Aspect="Uniform"

      Data="M22.375.065C21.037.12,9.179.721,4.92,4.979A10.018,10.018,0,0,0,3.939,17.94L.007,21.879,2.128,24,6.06,20.061a10.019,10.019,0,0,0,12.961-.981c4.342-4.342,4.868-16.134,4.914-17.464L23.991,0ZM16.9,16.958a7,7,0,0,1-8.683.947l8.72-8.719L14.814,7.064,6.1,15.784A7,7,0,0,1,7.042,7.1c2.512-2.513,9.738-3.595,13.8-3.932C20.523,7.206,19.465,14.393,16.9,16.958Z"

      />

 

アイコンはフリー素材をSVGでダウンロードし、（今回使用したサイトは https://www.flaticon.com/） 

ブラウザで開き、右クリックメニューの「ページのソースを表示」を選択。

ページのソースで <path d="～" /> の～部分をコピーして、xamlの<Path Data＝～>に貼り付ける。 

　3. 円の描画

 図形とラベルの間がスカスカっと空いていたので<Ellipse>を使って円を入れてみました。（これはイマイチな仕上がり、、？）

<StackLayout Grid.Row="1" HorizontalOptions="Center" Margin="0, -100, 0, 0" Spacing="10" WidthRequest="180">

    <Grid HeightRequest="60" WidthRequest="60" HorizontalOptions="Start">

        <Ellipse Stroke="Beige" StrokeThickness="2" Aspect="Fill"/>

    </Grid>

    <Grid HeightRequest="40" WidthRequest="40" HorizontalOptions="Center">

        <Ellipse Stroke="Beige" StrokeThickness="2" Aspect="Fill"/>

    </Grid>

    <Grid HeightRequest="30" WidthRequest="30" HorizontalOptions="End">

        <Ellipse Stroke="Beige" StrokeThickness="2" Aspect="Fill"/>

    </Grid>

</StackLayout>

 

　今回はyoutubeをいくつか観て学びました。本日書いたもの以外にも試してみたくなるものもあり、徐々に試していってみたいと思います。