jaydopartu
jaydopartu

Reputation: 93

How to redefine basic controls in MAUI.NET

In WPF we could "Edit template" of ComboBox and define how it should look from scratch. How we can achieve this in MAUI.NET?

I want to make a combobox have exact same functionality like it has, but get rid of some styling and most importantly change the shape of this small arrow that is responsible of showing possible values after user click it.

Additionaly I would like to give completely new design of switch, but remaining its functionality and make another switch with 3 states - OFF, AUTO and ON. The last one I guess would require to create my own control from scratch.

EDIT:

So there are some insights what I would like to achieve.

enter image description here

I did already textbox and switch control in quite tricky way. An example of switch like mine:

<Border Style="{StaticResource DefaultWidgetBorderStyle}" WidthRequest="120">
    <Grid>
        <Button VerticalOptions="Center" HorizontalOptions="Start" HeightRequest="46" WidthRequest="60" CornerRadius="30" Margin="0" Padding="0" Text="OFF" BackgroundColor="{StaticResource GrayColor}" IsVisible="{Binding Value, Converter={StaticResource InverseBooleanConverter}}" Clicked="Button_Clicked"/>
        <Button VerticalOptions="Center" HorizontalOptions="End" HeightRequest="46" WidthRequest="60" CornerRadius="30" Margin="0" Padding="0" Text="ON" BackgroundColor="{StaticResource BlackColor}" IsVisible="{Binding Value}" Clicked="Button_Clicked"/>
    </Grid>
</Border>

Button_Clicked in .xaml.cs

private void Button_Clicked(object sender, EventArgs e)
{
    (this.BindingContext as CheckboxViewModel).Value = !(this.BindingContext as CheckboxViewModel).Value;
}

and CheckboxViewModel has basically a property of boolean type named Value that retrieve the value from a data source or set it to with INotifyProperty implemented.

I tried to compose a combobox in that manner. But it seems to be hard... I created it by a border, and two buttons. One horizontal could have binding .Text property from a ViewModel Value property (string). The other button could be just this arrow. And they could have a Click event or Command (in manner of MVVM) that makes the last element Visible. In order to display all possible values to the user I figure out listbox or collectionview binded to a ViewModel Items (List) which have binded .IsVisible property depending if the user click one of the previously mentioned buttons. But is limited to boundaries to the control. Even if I change ZIndex.

Anyway after switch success I felt I can go with that way. But after combobox I feel that this workaround sooner or later would have limitations and this is not a good way finally.

The additional problem is that all of these widgets / "DIY controls" are rendered from ViewModels in runtime and their are "packed" into tabs, regions or lines (each of them have its own ViewModels). The line have specific height and it seems that ListBox with possible values they are limited to the line that contains such a Combobox, no matter of ZIndex...

EDIT 2: I just did this combobox my way (described above) and some other required (not a slider below). This is quite tricky way. I just leave it here as I am very interested in the opinion of @ToolmakerSteve and @FreakyAli. I feel this is not proper way. But come on! MAUI.NET seems to be hard in this area... I am aware that it is cross-platform and it is based on native controls which have some big advantages. That is ok, but imho they should allow us to develop what we need to and I am sure with the raise of UX/UI lots of people would like a differently looking comboboxes etc. I saw people from a Microsoft team here, so maybe someone would describe the handler modification process with better samples or show alternative way. That would be nice support.

Upvotes: 0

Views: 724

Answers (1)

Guangyu Bai - MSFT
Guangyu Bai - MSFT

Reputation: 4606

If you want to customize Controls with Handlers, mappings are the first and easiest option for most behavior changes. If you want to change how a property affects a native control (or even ignore a property), modifying the mapping for the property is the way to go. Existing mappings can be modified or replaced, and you can add brand new mappings.

For examples of modifying an existing mapping, see Customizing Controls with Handlers.

Upvotes: 1

Related Questions