CODEWITHSUNDEEP
maui
user10403352
user10403352

Reputation: 13

.Net Maui Button Template

Is it possible to template a Button in .Net Maui such as:

 <Style TargetType="{x:Type Button}">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsDefaulted" Value="true">
                            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                            <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I have searched but without success. Actually I want different Corner Radius for my button

Upvotes: 1

Views: 3113

Answers (1)

Liqun Shen-MSFT
Liqun Shen-MSFT

Reputation: 8260

Okay, you want to set each corner of the button. And as ewerspej suggested, you could wrap it in the Border and set the Border corner. Here is the example also in Visual State:

<ContentPage.Resources>
    <Style TargetType="Button">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" >
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="AliceBlue"/>
                            <Setter TargetName="myBorder" Property="Border.StrokeShape">
                                <Setter.Value>
                                    <RoundRectangle CornerRadius="0,0,0,40" />  
                                </Setter.Value>
                            </Setter>
                        </VisualState.Setters>
                    </VisualState>

.......


<Border x:Name="myBorder">
    
    <Button HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"
            Text="Click me"
            CornerRadius="0"
    />
</Border>

For more info, you could refer to Button visual states and Visual states.

Upvotes: 0

Related Questions