Xamarin Forms 使用自定义 ControlTemplate 覆盖 Picker

Question

I want to override the Xamarin Forms Control Picker so it display "No entries" if the binded collection is empty.

I tried:

<Picker
    x:Class="v.App.Styling.Controls.vPicker"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="clr-namespace:v.App.Styling.Controls;assembly=v.App"
    x:Name="CustomPicker"
    mc:Ignorable="d" >

    <Picker.Style>
        <Style TargetType="controls:vPicker">
            <Setter Property="ControlTemplate">
                <Setter.Value>
                    <ControlTemplate>
                        <controls:vStackLayout >
                            <ContentPresenter 
                                IsVisible="{Binding ItemsSource.Count, Converter={StaticResource HasItemsToBoolConverter}, ConverterParameter=0}"
                                Content="{TemplateBinding Content}" />

                            <controls:vEntry 
                                IsVisible="{Binding ItemsSource, Converter={StaticResource HasNoItemsToBoolConverter}"
                                IsEnabled="False"
                                TextColor="{StaticResource ColorTextSecondary}"
                                Text="No entries"  />
                        </controls:vStackLayout>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Picker.Style>
</Picker>

But I get

      Error XFC0001: Cannot resolve property "ControlTemplate" on type "vPicker (property missing or missing accessors)". (13, 21)

I'm not sure what I'm doing wrong...

Answer 1

you could use data bindings to make it.

In the.xaml for Picker:

<Picker x:Name="picker"
        ItemsSource="{Binding ItemCollection}"
        IsVisible="{Binding IsVisible}"
        Title="Select a monkey"
        TitleColor="Red">         
</Picker> 

And in ViewModel just add some logic like this:

public Command ClickedCommand  // i define a button to add item to ItemCollection as a demo
{
    get
    {
        return new Command(() =>
        {
            ItemCollection.Add(count);
            count++;
            if(ItemCollection.Count > 0)
            {
                IsVisible = true;
            }
        });
    }
}

Hope it works for you.

Answer 2

Another solution that I offered someone trying to create their own style, but for a button. The underlying premise is the same. You have something special you want to do based on a default class (or derived).

I would take the picker control, subclass it and add your own dependency property boolean or visibility so it can be used within your own custom style template. A dependency property is instance specific, so if you had one picker that HAD entries, its flag would be different than another that had NO entries.

Now, that said, Here is one source to start about your own templates / styles

But this one goes into an elaborate control template for a picker. You could build your own simplified and have your visible vs not context defined once as a style. Then when you define your combobox picker control, just have it reference the given style you declare. Having this style in a ResourceDictionary and available system wide can help all instances have the same look and feel without duplicating all over.