Skip to content

Latest commit

 

History

History
104 lines (88 loc) · 3.56 KB

ContentButton.md

File metadata and controls

104 lines (88 loc) · 3.56 KB
Raw

ContentButton

In order to use this control, you need to call the UseSimpleToolkit() extension method in your MauiProgram.cs file:

builder.UseSimpleToolkit();

ContentButton can be found in the following XAML namespace:

xmlns:simpleCore="clr-namespace:SimpleToolkit.Core;assembly=SimpleToolkit.Core"

ContentButton is just a button that can hold whatever content you want:

<simpleCore:ContentButton Clicked="StarButtonClicked">
    <Border Background="Orange">
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="6"/>
        </Border.StrokeShape>
        <HorizontalStackLayout Padding="12,10" Spacing="10">
            <simpleCore:Icon
                Source="star.png" TintColor="White"
                VerticalOptions="Center"
                HeightRequest="18" WidthRequest="18"/>
            <Label
                Text="Star this repo" TextColor="White"
                FontAttributes="Bold"
                VerticalOptions="Center"/>
        </HorizontalStackLayout>
    </Border>
</simpleCore:ContentButton>

Output:

Visual states

ContentButton provides the same visual states as .NET MAUI Button does:

<simpleCore:ContentButton Clicked="StarButtonClicked">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="Pressed">
                    <VisualState.Setters>
                        <Setter
                            TargetName="border" 
                            Property="Background" 
                            Value="OrangeRed"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <VisualState.Setters>
                        <Setter
                            TargetName="border" 
                            Property="Background" 
                            Value="DarkOrange"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>
    <Border x:Name="border" Background="Orange">
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="6"/>
        </Border.StrokeShape>
        <HorizontalStackLayout Padding="12,10" Spacing="10">
            <simpleCore:Icon
                Source="star.png" TintColor="White"
                VerticalOptions="Center"
                HeightRequest="18" WidthRequest="18"/>
            <Label
                Text="Star this repo" TextColor="White"
                FontAttributes="Bold"
                VerticalOptions="Center"/>
        </HorizontalStackLayout>
    </Border>
</simpleCore:ContentButton>

Output:

Implementation details

The ContentButton class is inherited from the .NET MAUI ContentView control. ContentButton has these events and properties in addition to ContentViews events and properties:

  • Clicked - an event that fires when the button is clicked
  • Pressed - an event that fires when the button is pressed
  • Released - an event that fires when the button is released
  • Command - a command that is invoked when the button is clicked
  • CommandParameter - a parameter to pass to the Command property