Xamarin Forms override Picker with custom ControlTemplate-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

Update here

You could use a ContentView to write a custom control, as the picker doesn't have a ControlTemplate property. You could create your own custom picker view using ContentView, such like this:

<ContentView
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="PickerControlTemplate74952715.PickerView"
    x:Name="PickerView">
<ContentView.Content>
    ...
    <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>
</ContentView.Content>

For more info, you could refer to Xamarin.Forms control templates and Create a custom control

===============

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.