0

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.

jaydopartu
  • 63
  • 1
  • 8
  • 3
    Its not as convenient in Maui. And the docs need improving. Start with https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/customize?view=net-maui-7.0. Then look for examples. [Freaky Ali / Maui FreakyControls](https://github.com/FreakyAli/Maui.FreakyControls) should be useful to look at. I haven't used, but Ali has given helpful answers here on StackOverflow. Bottom line: because Maui is built on each platform's "native" controls, deep customization requires changing the creation of those controls, on each platform. – ToolmakerSteve Mar 03 '23 at 22:41
  • 1
    So Customizing controls with .Net Maui is very different from WPF, I have only read docs and never worked on WPF extensively but I can maybe help you create the controls that you want with Maui or XF, Show us some of the expected visuals and maybe i can guide you to existing OSS that do have those things already ready – FreakyAli Mar 04 '23 at 02:50
  • 1
    @ToolmakerSteve Also has a lot of great answers here that helped me with my early Maui Journey, I highly recommend his answer for how to customize with handlers(example of entry as well), it probably has better details than Microsoft docs... – FreakyAli Mar 04 '23 at 02:53
  • 1
    https://stackoverflow.com/a/72412170/7462031 – FreakyAli Mar 04 '23 at 02:57
  • First of all thank you for the warm and helpful comments. I have checked your both mentioned github repositories. This give some perspective how to deal with handlers. But this way seems to be much harder than my workaround way of DIY controls by composing and styling basic ones. However I have doubts with my approach. Anyway - could you suggest some way after more details? Is there anything "already ready" or being ready to based on? Handlers in case of my combobox seems to be much work :) In WPF it was just edit template and change one element in control UI tree. – jaydopartu Mar 06 '23 at 15:19

1 Answers1

1

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.

Guangyu Bai - MSFT
  • 2,555
  • 1
  • 2
  • 8
  • Thank you for the comment. Do you think is it possible to provide by Microsoft or some employee some complex example of Customizing Controls with Handlers, soon? Maybe modifying the list that is to be shown when combobox reel out or this sign that is going to be clicked to perform this reel out? How can we know what is the Visual Tree of such a control that we want to modify? In WPF we could get it by a click. This knowledge seems to be needed to modify it. Best Regards and thank you for the great framework! In general I like to work with MAUI.NET. – jaydopartu Mar 09 '23 at 00:55
  • 1
    You can check the MAUI document about the [Create a custom control using handlers](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/create?view=net-maui-7.0). – Guangyu Bai - MSFT Mar 13 '23 at 05:23
  • Thanks a lot this is something mote detailed. I would give a try soon. – jaydopartu Mar 13 '23 at 17:15