Create custom controls

I am trying to create my own control derived from ItemsControl. ItemsControlinitialized by elements, but they are not displayed.

itemsControl:

public class PipeControl : ItemsControl 
{
    static PipeControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(PipeControl), new FrameworkPropertyMetadata(typeof(PipeControl)));                    
    }

    public PipeControl()
    {
        Checkers = new ObservableCollection<Checker>();
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());           
    }

    public ObservableCollection<Checker> Checkers 
    {
        get;
        set;               
    }        
}    

topic resource dictionary: Generic.xaml

<Style TargetType="{x:Type local:PipeControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:PipeControl}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">                                        
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate DataType="{x:Type local:Checker}">
                <Ellipse Fill="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />                    
            </DataTemplate>                
        </Setter.Value>            
    </Setter>

    <Setter Property="ItemsSource" Value="{Binding Checkers,RelativeSource={RelativeSource Self}}"/>                           

    <!-- Just a Precaution its the default panel any ways -->  
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel />
            </ItemsPanelTemplate>
        </Setter.Value>            
    </Setter>

</Style>

Any ideas why items are not showing?

+5
source share
1 answer

You need to install ItemSource. So, for example, you can add ItemsSource = Checkers;β€œAdd Checkers” below the last line. Despite the fact that you are trying to set ItemSource to Checkers in style, I think it would be easier if you installed in the control class. Only my two cents.

Here is an example of the PipeControl class:

public class PipeControl : ItemsControl
{
    public ObservableCollection<Checker> Checkers { get; set; }
    static PipeControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(PipeControl), new FrameworkPropertyMetadata(typeof(PipeControl)));
    }
    public PipeControl()
    {
        Checkers = new ObservableCollection<Checker>();
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());
        ItemsSource = Checkers;
    }
}

ItemPresenter ControlTemplate, Ellipse . :

<Style TargetType="{x:Type local:PipeControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:PipeControl}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <ItemsPresenter />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate DataType="{x:Type local:Checker}">
                <Ellipse Width="25"
                         Height="25"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         Fill="Red" />
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>
+11

All Articles