如何在MAUI.NET中重新定义基本控件

huangapple go评论58阅读模式
英文:

How to redefine basic controls in MAUI.NET

问题

在WPF中,我们可以"编辑模板"ComboBox并定义它应该从头开始看起来的方式。在MAUI.NET中,我们如何实现这一点?

我想让ComboBox具有与其相同的功能,但摆脱一些样式,最重要的是改变显示可能值的小箭头的形状,该箭头在用户单击后负责显示可能的值。

此外,我想为开关提供全新的设计,但保留其功能,并创建另一个具有三种状态(关闭、自动和打开)的开关。最后一个我想需要从头开始创建自己的控件。

编辑:

这是我想要实现的一些见解。

如何在MAUI.NET中重新定义基本控件

我已经以相当复杂的方式创建了文本框和开关控件。我的开关示例:

<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>

.xaml.cs中的Button_Clicked

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

CheckboxViewModel基本上具有一个名为Value的布尔类型属性,该属性从数据源检索值或使用实现INotifyProperty的方式进行设置。

我尝试以这种方式组合ComboBox。但似乎很困难...我通过一个边框和两个按钮创建了它。一个水平按钮可以从ViewModel的Value属性(字符串)绑定.Text属性。另一个按钮可以只是这个箭头。它们可以具有单击事件或命令(以MVVM的方式)来使最后一个元素可见。为了向用户显示所有可能的值,我想出了绑定到ViewModel项(List)的ListBox或CollectionView,具有根据用户单击先前提到的按钮之一而绑定的.IsVisible属性。但它受到控件边界的限制。即使我更改ZIndex。

不管怎样,在成功切换后,我觉得我可以继续这样做。但在ComboBox之后,我觉得这种解决方法迟早会有限制,这不是一个好的方式。

另一个问题是,所有这些小部件/“自定义控件”都是在运行时从ViewModel渲染的,并且它们被“打包”到选项卡、区域或行中(它们每个都有自己的ViewModel)。行具有特定的高度,而似乎ListBox具有可能值的行受到包含ComboBox的行的限制,无论ZIndex如何...

编辑2:
我刚刚以我上面描述的方式创建了这个ComboBox以及其他一些必需的内容(下面不是滑块)。这是相当复杂的方式。我只是留在这里,因为我对@ToolmakerSteve和@FreakyAli的意见非常感兴趣。我觉得这不是合适的方式。但是,MAUI.NET似乎在这个领域很难...我知道它是跨平台的,它基于具有一些重要优势的本机控件。这很好,但我认为他们应该允许我们开发我们需要的东西,我相信随着用户体验/用户界面的崛起,很多人都希望ComboBox等具有不同外观。我在这里看到来自Microsoft团队的人,也许有人能用更好的示例描述处理程序修改过程,或者展示其他方法。这将是一个不错的支持。

英文:

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.

如何在MAUI.NET中重新定义基本控件

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

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

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<string>) 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.

答案1

得分: 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.

huangapple
  • 本文由 发表于 2023年3月4日 01:50:03
  • 转载请务必保留本文链接:https://go.coder-hub.com/75630334-2.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定