[.NET MAUI][SearchBar] 水平方向のテキスト配置位置を設定する

.NET MAUI TIPS .NET MAUI
.NET MAUI TIPS
スポンサーリンク

本記事の概要

この記事では SearchBar で水平方向のテキスト配置位置を設定する方法について説明をします。

公式サイト情報はコチラを参照してください。

テキストの水平方向配置

テキストの水平方向配置

テキストの水平方向配置

SearchBar に入力するテキストは、HorizontalTextAlignment プロパティを使用して水平方向の配置位置を設定することができます。

説明
Start 左寄せ
Center 中央
End 右寄せ

XAML の例

XAML でテキストの水平方向の配置位置を設定する例を以下に示します。

この例では 3つのSearchBar に左寄せ、中央寄せ、右寄せを設定しています。

XAML の例

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppSample.MainPage"
             >
    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <SearchBar Text="Hello .NET MAUI" HorizontalTextAlignment="Start" />
            <SearchBar Text="Hello .NET MAUI" HorizontalTextAlignment="Center" />
            <SearchBar Text="Hello .NET MAUI" HorizontalTextAlignment="End" />

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

C# の例

以下は 先ほどのXAML の例を コードビハインドで行う例です。

C# の例

public MainPage()
{
    InitializeComponent();
    mySearchBar1.HorizontalTextAlignment = TextAlignment.Start;
    mySearchBar2.HorizontalTextAlignment = TextAlignment.Center;
    mySearchBar3.HorizontalTextAlignment = TextAlignment.End;
}

XAML の例

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppSample.MainPage"
             >
    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <SearchBar x:Name="mySearchBar1" Text="Hello .NET MAUI" />
            <SearchBar x:Name="mySearchBar2" Text="Hello .NET MAUI" />
            <SearchBar x:Name="mySearchBar3" Text="Hello .NET MAUI" />

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>
テキストの水平方向配置

テキストの水平方向配置

.NET MAUI Tips

本サイトでまとめている .NET MAUI Tips の一覧はこちらから確認できます。

Please follow and like us:

コメント

タイトルとURLをコピーしました