[Xamarin][CrossPlatform][Control] ScrollView

ScrollViewコントロールを使用すると、画面からはみ出してしまうようなデザインでも、スクロールして表示することができます。

はみ出してしまいそうなデザインは<ScrollView>から</ScrollView>の内側に配置します。

また、ScrollToAsyncというメソッドを使用すると、任意の位置へスクロールさせることができます。

ScrollToAsyncのメソッドには以下のようなオーバーロードがあります。

書式1
scrollView.ScrollToAsync(スクロールさせたい位置にあるコントロール, スクロール先のコントロールの位置, アニメーションをするかどうか);

書式2
scrollView.ScrollToAsync(横方向のスクロール位置, 縦方向のスクロール位置, アニメーションをするかどうか)

以下にScrollViewの使用例を示します。

この例では縦方向に「ラベル」「ボックス」「ラベル」「ボックス」「ラベル」を配置しています。上部には3つのボタンが配置してあり、これらのボタンを押すことでコード内で指定した位置へスクロールをします。

<StackLayout Margin="10,30,10,10">
  
  <StackLayout Orientation="Horizontal">
    <Button x:Name="btnMoveMid" Text="Middleへ移動 "/>
    <Button x:Name="btnMove400" Text="400の位置へ移動 " />
    <Button x:Name="btnMoveBottom" Text="Bottomへ移動 " />
  </StackLayout>
  
  <ScrollView x:Name="scrollView">
    <StackLayout>
      <Label Text="Top" />

      <BoxView HeightRequest="600" 
        BackgroundColor="Blue" />
      
      <Label x:Name="lblMiddle" Text="Middle" />
               
      <BoxView HeightRequest="600" 
        BackgroundColor="Blue" />
      
      <Label x:Name="lblBottom" Text="Bottom" />
    </StackLayout>
  </ScrollView>

</StackLayout>
public MainPage()
{
 InitializeComponent();

 // [Middleへ移動]ボタンタップ時の処理
 btnMoveMid.Clicked += (sender, e) =>
 {
 scrollView.ScrollToAsync(lblMiddle,
 ScrollToPosition.Start, true);
 };
 // [400の位置へ移動]ボタンタップ時の処理
 btnMove400.Clicked += (sender, e) =>
 {
 scrollView.ScrollToAsync(0, 400, true);
 };
 // [Bottomへ移動]ボタンタップ時の処理
 btnMoveBottom.Clicked += (sender, e) =>
 {
 scrollView.ScrollToAsync(lblBottom,
 ScrollToPosition.Start, true);
 };
}

ScrollView

[Xamarin][CrossPlatform][Control] CarouselPage

今回はCarouselPageを見ていきましょう。

CarouselPageコントロールは、スワイプ操作によってページ切り替えを行うことができるようにするコントロールです。

新規でプロジェクトを作成するとメインのXAMLは以下のようにContentPageが配置されています。

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:CarouselPageSample" x:Class="TabbedPageSample.TabbedPageSamplePage">
	<Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

CarouselPageを使用する場合は上記のContentPageをCarouselPageに変更し、その中に必要なページの数だけContentPageを配置します。

これによりページをスワイプで切り替えれらるようになります。ページに表示するデザインは、それぞれのContenPageの中で行います。

以下はCarouselPageの例です。

<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms" 
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
		xmlns:local="clr-namespace:CarouselPageSample" 
		x:Class="CarouselPageSample.CarouselPageSamplePage">
	<ContentPage Title="Page1">
		<Label Text="Welcome to Xamarin Forms1!" VerticalOptions="Center" HorizontalOptions="Center" />
	</ContentPage>
	<ContentPage Title="Page2">
		<Label Text="Welcome to Xamarin Forms2!" VerticalOptions="Center" HorizontalOptions="Center" />
	</ContentPage>
		<ContentPage Title="Page3">
		<Label Text="Welcome to Xamarin Forms3!" VerticalOptions="Center" HorizontalOptions="Center" />
	</ContentPage>
</CarouselPage>

また、XAMLのコードビハインドは以下のようにCarouselPageを継承するように変更をします。

using Xamarin.Forms;

namespace CarouselPageSample
{
	public partial class CarouselPageSamplePage : CarouselPage
	{
		public CarouselPageSamplePage()
		{
			InitializeComponent();
		}
	}
}

上記の実行例を以下に示します。

CarouselPageの例

関連記事

[UWP][カレンダー] 予定を編集する

今回は予定を編集する方法について見ていきましょう。

カレンダーの予定を編集するにはShowAppointmentDetailsAsyncメソッドを使用します。このメソッドの引数には、すでに登録してある予定のIDです。

以下に、予定を編集するダイアログを表示するコードを示します。

private async void btnEdit_Click(object sender, RoutedEventArgs e)
{
    // IDがない場合は処理終了
    if (string.IsNullOrEmpty(this._id)) return;

    // 予定を追加してIDを取得する
    await Windows.ApplicationModel.Appointments.AppointmentManager.ShowAppointmentDetailsAsync(this._id);
}

実行すると以下のように予定を編集をするためのウィンドウが表示されます。

予定の編集

関連記事

[UWP][連絡先] 選択モードを指定する

今回は連絡先ピッカーで選択モードを指定する方法について見ていきます。

連絡先ピッカーは、既定でユーザーが選択した連絡先のすべての情報を取得します。

選択モードを指定することで、アプリで必要なデータのみを取得するように限定することができます。

選択モードを限定するにはピッカーの SelectionMode に Windows.ApplicationModel.Contacts.ContactSelectionMode.Fields を指定します。

続いて、ピッカーの DesiredFieldsWithContactFieldType.Add メソッドで限定して取得する項目を指定します。今回はメールアドレスを取得するようにコードを記述してみます(以下コード参照)。

ピッカー表示後のif文は、連絡先が選択されていなかった場合に備えるものです。

取得したメールアドレスは、Emailsオブジェクトに入っています。Emials[0].Addressとすることで、選択された1件目のアドレスを取得することができます。

private async void btnGetContact_Click(object sender, RoutedEventArgs e)
{
    var picker = new Windows.ApplicationModel.Contacts.ContactPicker();

    // 選択モードをFieldsに設定
    picker.SelectionMode = Windows.ApplicationModel.Contacts.ContactSelectionMode.Fields;

    // 連絡先ピッカーで取得するフィールドを指定
    picker.DesiredFieldsWithContactFieldType.Add(
        Windows.ApplicationModel.Contacts.ContactFieldType.Email);  

    Contact contact = await picker.PickContactAsync();

    if (contact != null)
    {
        textBlockEmail.Text = contact.Emails[0].Address;
    }
}

実行例を以下に示します。

連絡先の選択

選択されたアドレスを表示

 

 

 

[UWP][RichTextBlock] RichTextBlockで文字列を表示する

UWPでは、TextBlockというコントロールがありますが、このほかにRichTextBlockコントロールがあります。

RichTextBlockは、TextBlockと比較すると画像やハイパーリンクを交え、さらにフォントの装飾までも行える、表現力豊かなテキスト表示用コントロールです。

今回は、文字の表示について見ていきましょう。

RichTextBlockコントロールは、TextやContentというプロパティはなく、Paragraphというプロパティを使用します。Paragraphプロパティは段落を表すプロパティで最低1つ必要です。

以下は、RichTextBlockコントロールを使用して「これはRichTextBlockです」という文字列を表示するXamlです。

1つのParagraph(段落)があり、この中で表示する文字列を定義しています。

TextIndetプロパティは、左端からのインデントサイズです。

「RichTextBlock」の部分は文字を装飾できるように<Run>を使用しています。

Textは表示する文字列を、Foregroundは前景色を、FontFamilyはフォントを設定しています。このほか。FontWeightを使用して太字に、、FontWeightで斜体に、FontSizeでフォントサイズを20にしています。

<RichTextBlock TextIndent="20">
    <Paragraph TextIndent="0">
        これは
        <Run Text="RichTextBlock" Foreground="Red"
             FontFamily="游ゴシック" FontWeight="Bold" 
             FontStyle="Italic"
             FontSize="20" />
        です
    </Paragraph>
</RichTextBlock>

実行例は以下の通りです。

RichTextBlockの使用例