[.NET MAUI][TableView] TextCell のテキストの色を変更する

.NET MAUI

.NET MAUI TIPS

2022.09.18

本記事の概要
TextCell のテキストを色を変更する
.NET MAUI Tips

本記事の概要

TableView で使用する TextCell は、テキストを表示するためのコントロールです。

この記事では TextCell のテキストの色を変更する方法について説明します。

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

TextCell の色を変更する

TextCell のテキストを色を変更する

また、<TextCell> では Text プロパティで見出しを、Detail プロパティで詳細テキストを表示することができます。TextColor プロパティを使用すると Text プロパティで設定した文字列の色を変更することができます。

以下の例では「基本」セクションに表示しているテキストの見出しの色を Orange に、「コントロール」セクションに表示しているテキストの見出しの色を BlueViolet に設定しています。

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">

    <TableView Intent="Menu">
        <TableRoot>
            <TableSection Title="基本">
                <TextCell Text="1. .NET MAUI とは？"
                          TextColor="Orange"
                          Detail="この章では .NET MAUI とは何かについて説明します。" />
                <TextCell Text="2. Binding の基礎"
                          TextColor="Orange"
                          Detail="この章では Bindingの基礎について説明します。" />
            </TableSection>
            <TableSection Title="コントロール">
                <TextCell Text="1. Entry コントロール"
                          TextColor="BlueViolet"
                          Detail="Entry コントロールの使い方について説明します。" />
                <TextCell Text="2. Label コントロール"
                          TextColor="BlueViolet"
                      Detail="Label コントロールの使い方について説明します。" />
                <TextCell Text="3. Picker コントロール"
                          TextColor="BlueViolet"
                          Detail="Picker コントロールの使い方について説明します。" />
            </TableSection>
        </TableRoot>
    </TableView>

</ContentPage>

TextCell の色を変更する