Go to Qiita Advent Calendar 2024 Top
LoginSignup
10
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@kashin777(かしん)

.NET MAUI (UIコントロール)

Last updated at Posted at 2022-07-14

はじめに

.NET MAUI のUIコントロール (View) の一覧です。　

開発環境

  • Win11
  • VS2022 Preview Version 17.3.0 Preview 3.0 new!

環境構築＆プロジェクト作成の流れはこちらの記事でどうぞ。

サンプルソース

一式GitHubに公開してます。

Views

ActivityIndicator

ぐるぐる進捗状況

image.png

<Label Grid.Row="1" Grid.Column="0" Text="ActivityIndicator" />
<HorizontalStackLayout Grid.Row="1" Grid.Column="1" VerticalOptions="Center">
     <CheckBox IsChecked="True" x:Name="ActivityIndicatorCheckBox" />
     <ActivityIndicator WidthRequest="50" HeightRequest="50" IsRunning="{Binding Source={x:Reference ActivityIndicatorCheckBox}, Path=IsChecked}" Color="Red"  />
     <ActivityIndicator WidthRequest="50" HeightRequest="50" IsRunning="{Binding Source={x:Reference ActivityIndicatorCheckBox}, Path=IsChecked}" Color="Green" />
     <ActivityIndicator WidthRequest="50" HeightRequest="50" IsRunning="{Binding Source={x:Reference ActivityIndicatorCheckBox}, Path=IsChecked}" Color="Blue" />
</HorizontalStackLayout>

BlazorWebView

Blazorが動くWeb

Border

ボーダーライン

image.png

<Label Grid.Row="3" Grid.Column="0" Text="Border" />
<HorizontalStackLayout Grid.Row="3" Grid.Column="1" VerticalOptions="Center">
    <Border WidthRequest="50" HeightRequest="50" Margin="5" Stroke="Black"
            StrokeThickness="1" StrokeShape="Rectangle" />
    <Border WidthRequest="50" HeightRequest="50" Margin="5" Stroke="Red"
            StrokeThickness="2" StrokeShape="RoundRectangle 10,10,10,10"/>
    <Border WidthRequest="50" HeightRequest="50" Margin="5" Stroke="Green"
            StrokeThickness="3" StrokeShape="Rectangle" StrokeDashArray="5.0" StrokeDashOffset="1.0">
    </Border>
    <Border WidthRequest="50" HeightRequest="50" Margin="5" Stroke="Blue"
            StrokeThickness="6" StrokeShape="Ellipse" BackgroundColor="SkyBlue" />
</HorizontalStackLayout>

BoxView

箱

image.png

<Label Grid.Row="4" Grid.Column="0" Text="BoxView" />
<HorizontalStackLayout Grid.Row="4" Grid.Column="1" VerticalOptions="Center">
    <BoxView WidthRequest="50" HeightRequest="50" Margin="5" Color="Pink" />
    <BoxView WidthRequest="50" HeightRequest="50" Margin="5" Color="LightGreen" CornerRadius="10" />
    <BoxView WidthRequest="50" HeightRequest="50" Margin="5" Color="LightBlue" CornerRadius="20,0,0,0" />
</HorizontalStackLayout>

Button

ボタン

image.png

<Label Grid.Row="5" Grid.Column="0" Text="Button" />
<HorizontalStackLayout Grid.Row="5" Grid.Column="1" VerticalOptions="Center">
    <Button WidthRequest="80" HeightRequest="50" Margin="5" Text="Click" TextColor="White" Background="Red" />
    <Button WidthRequest="80" HeightRequest="50" Margin="5" Text="Click" TextColor="Black" Background="Green" />
    <Button WidthRequest="120" HeightRequest="50" Margin="5" Text="Click" TextColor="Black" Background="LightBlue" ImageSource="logout.png" />
</HorizontalStackLayout>

CarouselView

カルーセル(Windowsではうまく動かないよ)

image.png

<Label Grid.Row="6" Grid.Column="0" Text="CarouselView" />
<HorizontalStackLayout Grid.Row="6" Grid.Column="1" VerticalOptions="Center">
    <Label VerticalTextAlignment="Center" WidthRequest="120">
        <Label.FormattedText>
            <FormattedString>
                <Span Text="Current Item = " />
                <Span Text="{Binding Source={Reference CarouselView}, Path=CurrentItem.Name}" />
            </FormattedString>
        </Label.FormattedText>
    </Label>
    <CarouselView x:Name="CarouselView" WidthRequest="200" HeightRequest="100" 
                  ItemsSource="{StaticResource UserArray}" ItemTemplate="{StaticResource UserViewTemplate}"
                  Position="0" PeekAreaInsets="60" BackgroundColor="#D9D9D9">
    </CarouselView>
</HorizontalStackLayout>

CheckBox

チェック (VisualStateがうまく動かないよ。)

image.png

<Label Grid.Row="7" Grid.Column="0" Text="CheckBox" />
<HorizontalStackLayout Grid.Row="7" Grid.Column="1" VerticalOptions="Center">
    <CheckBox Margin="5" Color="Red" />
    <CheckBox Margin="5" Color="Green" />
    <CheckBox x:Name="CheckBox3" Margin="5" Color="LightBlue" />
    <CheckBox x:Name="CheckBox4" Margin="5" IsEnabled="{Binding Source={Reference CheckBox3}, Path=IsChecked}">
        <CheckBox.Triggers>
            <DataTrigger TargetType="{x:Type CheckBox}" Binding="{Binding Source={x:RelativeSource Mode=Self}, Path=IsChecked}" Value="False">
                <Setter Property="Color" Value="Red" />
            </DataTrigger>
            <DataTrigger TargetType="{x:Type CheckBox}" Binding="{Binding Source={x:RelativeSource Mode=Self}, Path=IsChecked}" Value="True">
                <Setter Property="Color" Value="Green" />
            </DataTrigger>
            <DataTrigger TargetType="{x:Type CheckBox}" Binding="{Binding Source={x:RelativeSource Mode=Self}, Path=IsEnabled}" Value="False">
                <Setter Property="Opacity" Value="0.3" />
            </DataTrigger>
        </CheckBox.Triggers>
    </CheckBox>
    <CheckBox Margin="5" IsEnabled="{Binding Source={Reference CheckBox4}, Path=IsChecked}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="Color" Value="Red" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="IsChecked">
                    <VisualState.Setters>
                        <Setter Property="Color" Value="Green" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="Opacity" Value="0.3" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </CheckBox>
</HorizontalStackLayout>

CollectionView

一覧

ContentView

カスタムビューの素

DatePicker

日付

image.png
image.png

<Label Grid.Row="9" Grid.Column="0" Text="DatePicker" />
<HorizontalStackLayout Grid.Row="9" Grid.Column="1" VerticalOptions="Center">
    <DatePicker Format="yyyy/MM/dd(ddd)" />
</HorizontalStackLayout>

Editor

複数行のテキスト

image.png

<Label Grid.Row="10" Grid.Column="0" Text="Editor" />
<HorizontalStackLayout Grid.Row="10" Grid.Column="1" >
    <Editor x:Name="Editor" WidthRequest="100" HeightRequest="100"
            Placeholder="Please input multi line text."
            MaxLength="100" Text="" />
    <Label VerticalOptions="Center">
        <Label.FormattedText>
            <FormattedString>
                <Span Text="length = " />
                <Span Text="{Binding Source={Reference Editor}, Path=Text.Length}" />
            </FormattedString>
        </Label.FormattedText>
    </Label>
</HorizontalStackLayout>

Ellipse

円

Entry

一行のテキスト

<Label Grid.Row="12" Grid.Column="0" Text="Entry" />
<HorizontalStackLayout Grid.Row="12" Grid.Column="1" VerticalOptions="Center">
    <Entry x:Name="Entry" WidthRequest="100"
            Placeholder="Please input single line text."
            MaxLength="100" Text="" />
    <Label VerticalOptions="Center">
        <Label.FormattedText>
            <FormattedString>
                <Span Text="length = " />
                <Span Text="{Binding Source={Reference Entry}, Path=Text.Length}" />
            </FormattedString>
        </Label.FormattedText>
    </Label>
</HorizontalStackLayout>

Frame

Border ※Xamarin.Formsの名残

GraphicsView

ペイント

Image

イメージ。影付き

image.png

<Label Grid.Row="14" Grid.Column="0" Text="Image" />
<HorizontalStackLayout Grid.Row="14" Grid.Column="1" VerticalOptions="Center">
    <Image Source="dotnet_bot.png" WidthRequest="50" HeightRequest="50" >
        <Image.Shadow>
            <Shadow Brush="Black"
                    Offset="20,20"
                    Radius="40"
                    Opacity="0.8" />
        </Image.Shadow>
    </Image>
    <Image Source="dotnet_bot.png" WidthRequest="50" HeightRequest="50" Opacity="0.5" />
    <Image Source="dotnet_bot.png" WidthRequest="50" HeightRequest="50" Opacity="0.2">
        <Image.Shadow>
            <Shadow Brush="Black"
                    Offset="20,20"
                    Radius="40"
                    Opacity="0.8" />
        </Image.Shadow>
    </Image>
</HorizontalStackLayout>

ImageButton

イメージのボタン

IndicatorView

インディケータ

image.png

<Label Grid.Row="16" Grid.Column="0" Text="IndicatorView" />
<HorizontalStackLayout Grid.Row="16" Grid.Column="1" VerticalOptions="Center">
    <VerticalStackLayout Spacing="10">
        <CarouselView WidthRequest="200" HeightRequest="100" 
                ItemsSource="{StaticResource UserArray}" ItemTemplate="{StaticResource UserViewTemplate}"
                Position="0" PeekAreaInsets="60" BackgroundColor="#D9D9D9"
                IndicatorView="IndicatorView">
        </CarouselView>
        <IndicatorView x:Name="IndicatorView" 
                       IndicatorColor="LightGray"
                       SelectedIndicatorColor="{StaticResource Primary}"
                       IndicatorSize="9"
                       HorizontalOptions="Center"/>
    </VerticalStackLayout>
</HorizontalStackLayout>

Label

ラベル

Line

線

ListView

選択できる一覧

Path

複雑な線

Picker

ピッカー

image.png
image.png

<Label Grid.Row="21" Grid.Column="0" Text="Picker" />
<HorizontalStackLayout Grid.Row="21" Grid.Column="1" VerticalOptions="Center">
    <Picker x:Name="Picker" WidthRequest="200" 
                ItemsSource="{StaticResource UserArray}" ItemDisplayBinding="{Binding Name}">
    </Picker>
</HorizontalStackLayout>

Polygon

ポリゴン

Polyline

ポリライン

ProgressBar

進捗バー

image.png

<Label Grid.Row="24" Grid.Column="0" Text="ProgressBar" />
<HorizontalStackLayout Grid.Row="24" Grid.Column="1" VerticalOptions="Center" Spacing="5">
    <Button Text="animation" Clicked="ProgressBar_Animation" />
    <ProgressBar x:Name="ProgressBar1" WidthRequest="50" Progress="0.5" ProgressColor="Red" />
    <ProgressBar x:Name="ProgressBar2" WidthRequest="50" Progress="0.5" ProgressColor="Green" />
    <ProgressBar x:Name="ProgressBar3" WidthRequest="50" Progress="0.5" ProgressColor="Blue" />
    <ProgressBar x:Name="ProgressBar4" WidthRequest="50" Progress="0.5" ProgressColor="Green" />
    <ProgressBar x:Name="ProgressBar5" WidthRequest="50" Progress="0.5" ProgressColor="Red" />
</HorizontalStackLayout>

	private void ProgressBar_Animation(object sender, EventArgs e)
	{
		ProgressBar1.Progress = 0;
		ProgressBar1.ProgressTo(1.0, 3000, Easing.Linear);
        ProgressBar2.Progress = 0;
        ProgressBar2.ProgressTo(1.0, 3000, Easing.SpringIn);
        ProgressBar3.Progress = 0;
        ProgressBar3.ProgressTo(1.0, 3000, Easing.CubicIn);
        ProgressBar4.Progress = 0;
        ProgressBar4.ProgressTo(1.0, 3000, Easing.BounceIn);
        ProgressBar5.Progress = 0;
        ProgressBar5.ProgressTo(1.0, 3000, Easing.BounceOut);
    }

RadioButton

ラジオ

image.png

<Label Grid.Row="25" Grid.Column="0" Text="RadioButton" />
<HorizontalStackLayout Grid.Row="25" Grid.Column="1" VerticalOptions="Center" RadioButtonGroup.GroupName="Group1" Spacing="5">
    <RadioButton IsChecked="True"  Content="A" BorderColor="Red" TextColor="Red" BorderWidth="2" CornerRadius="5" BackgroundColor="Pink" />
    <RadioButton IsChecked="False" Content="B" BorderColor="Green" TextColor="Green"  BorderWidth="2" CornerRadius="5" BackgroundColor="LightGreen" />
    <RadioButton IsChecked="False" Content="C" BorderColor="Blue" TextColor="Blue"  BorderWidth="2" CornerRadius="5" BackgroundColor="LightBlue" />
</HorizontalStackLayout>

Rectangle

四角

RefreshView

更新できるビュー

RoundRectangle

角丸四角

ScrollView

スクロールできるビュー

SearchBar

検索窓

Slider

スライダ

image.png

<Label Grid.Row="31" Grid.Column="0" Text="Slider" />
<HorizontalStackLayout Grid.Row="31" Grid.Column="1" VerticalOptions="Center" Spacing="5">
    <Slider Value="0" Minimum="0" Maximum="100" WidthRequest="100" MinimumTrackColor="Pink" MaximumTrackColor="Gray" ThumbColor="Red" />
    <Slider Value="50" Minimum="0" Maximum="100" WidthRequest="100" MinimumTrackColor="LightGreen" MaximumTrackColor="Gray" ThumbColor="Green" />
    <Slider Value="100" Minimum="0" Maximum="100" WidthRequest="100" MinimumTrackColor="LightBlue" MaximumTrackColor="Gray" ThumbColor="Blue" />
</HorizontalStackLayout>

Stepper

ステッパ

image.png

<Label Grid.Row="32" Grid.Column="0" Text="Stepper" />
<HorizontalStackLayout Grid.Row="32" Grid.Column="1" VerticalOptions="Center">
    <Label VerticalTextAlignment="Center">
        <Label.FormattedText>
            <FormattedString>
                <Span Text="Current Value = " />
                <Span Text="{Binding Source={Reference Stepper}, Path=Value}" />
            </FormattedString>
        </Label.FormattedText>
    </Label>
    <Stepper x:Name="Stepper" Value="5" Minimum="0" Maximum="10" Increment="1" />
</HorizontalStackLayout>

SwipeView

スワイプできるビュー

Switch

スイッチ

image.png

<Label Grid.Row="34" Grid.Column="0" Text="Switch" />
<HorizontalStackLayout Grid.Row="34" Grid.Column="1" VerticalOptions="Center">
    <Switch IsToggled="False" OnColor="Pink" ThumbColor="Red" />
    <Switch IsToggled="True" OnColor="LightGreen"  ThumbColor="Green" />
    <Switch IsToggled="True" OnColor="LightBlue"  ThumbColor="Blue" IsEnabled="False" />
</HorizontalStackLayout>

TableView

テーブルビュー

TimePicker

時刻

image.png
image.png

<Label Grid.Row="35" Grid.Column="0" Text="TimePicker" />
<HorizontalStackLayout Grid.Row="35" Grid.Column="1" VerticalOptions="Center">
    <TimePicker Format="HH:mm:ss" Time="12:34:00" />
</HorizontalStackLayout>

WebView

Web

image.png

<Label Grid.Row="36" Grid.Column="0" Text="WebView" />
<HorizontalStackLayout Grid.Row="36" Grid.Column="1" VerticalOptions="Center">
    <ScrollView WidthRequest="300" HeightRequest="200">
        <WebView HorizontalOptions="Fill" VerticalOptions="Fill" Source="https://github.com/" />
    </ScrollView>
</HorizontalStackLayout>

Pages

  • ContentPage
  • FlyoutPage
  • NavigationPage
  • TabbedPage

Layout

  • AbsoluteLayout
    絶対位置指定のレイアウト

  • BindableLayout

  • FlexLayout
    CSSのFlexBoxに基づいたレイアウト

  • Grid
    行と列で並べる

  • HorizontalStackLayout
    横に並べる

  • StackLayout
    縦または横に並べる(切り替え可能)

  • VerticalStackLayout
    縦に並べる

10
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?