[.NET MAUI][Button] ボタンにイメージを表示する

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

本記事の概要

この記事では Button にイメージを表示する方法について説明をします。

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

ボタンにイメージを表示する例

ボタンにイメージを表示する例

イメージを表示する

プロジェクトへのイメージの追加

ボタンに表示するイメージは外部リソースでも構いませんが、ここではプロジェクトに追加したイメージを利用する方法について説明します。

プロジェクトにイメージを追加するには、Resources¥Images フォルダに任意の画像を追加します。このフォルダーに追加したイメージは、ビルド アクションが自動的に MauiImage に設定されます。

以下は word.svg とexcel.png の2つの画像を追加した例です。dotnet_bot.svg という画像ファイルは、プロジェクト作成時から存在する画像です。

プロジェクトにイメージを追加する例

プロジェクトにイメージを追加する例

ここで注意しなければいけないのは、画像ファイル名は、すべて小文字にし、単語と単語をつなぐ場合はアンダースコア(_)を使用する必要があるということです。

先頭が大文字の画像ファイルですと、ビルド自体が失敗しますので注意してください。

png や jpg の他に スケーラブル ベクター グラフィックス (SVG) ファイルも使用することができます。

.NET MAUI は SVG ファイルを PNG ファイルに変換しますので、SVG ファイルを .NET MAUI アプリ プロジェクトに追加した場合は、XAML または C# から参照するときは .png にする必要があります。

ボタンへのイメージ表示

Button にイメージを表示するには、ImageSource プロパティにイメージファイル名を指定します。

Resource¥Image フォルダに追加したイメージは、ファイル名のみを記述すれば OK です。また、先述したように svg ファイルの場合は、拡張子を png にする必要があります。例えば Resource¥Images フォルダに word.svg というファイルを追加した場合は、word.png にします。

イメージをボタンテキストから見てどこに配置するかを指定するには、ContentLayout プロパティを使用します。例えば、ボタンテキストの左側に50離れた位置に表示したい場合は、”Left, 50″ のように指定します。

XAML の例

XAML でボタンに画像イメージを表示する例を以下に示します。

この例では2つの Button を配置しており、上のボタンにはテキストの右側に Word アイコン画像を、下のボタンには テキストに左側に Excel アイコン画像を表示しています。

Word 画像は、Resource¥Images フォルダでは word.svg ファイルですので、拡張子を png にして記述しています。

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="CenterAndExpand">
            <Button Text="Word text" 
                    ImageSource="word.png"
                    BackgroundColor="LightGray"
                    TextColor="Black"
                    WidthRequest="200"
                    HeightRequest="50"
                    ContentLayout="Right, 20" />
            
            <Button Text="Excel"
                    ImageSource="excel.png" 
                    BackgroundColor="LightGray"
                    TextColor="Black"
                    WidthRequest="200"
                    HeightRequest="50"
                    ContentLayout="Left, 50" />

        </VerticalStackLayout>
    </ScrollView>
 
</ContentPage>
ボタンにイメージを表示する例

ボタンにイメージを表示する例

.NET MAUI Tips

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

Please follow and like us:

コメント

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