WinUI

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SpinnerColumn

    Show / Hide Table of Contents

    Class SpinnerColumn

    Represents the model class to configure SpinnerColumnView.

    Inheritance
    System.Object
    NotificationObject
    SpinnerColumn
    DateTimeSpinnerColumn
    Implements
    System.ComponentModel.INotifyPropertyChanged
    Inherited Members
    NotificationObject.RaisePropertyChanged(String)
    NotificationObject.RaisePropertyChanged(String[])
    NotificationObject.PropertyChanged
    Namespace: Syncfusion.UI.Xaml.Editors
    Assembly: Syncfusion.Editors.WinUI.dll
    Syntax
    public class SpinnerColumn : NotificationObject, INotifyPropertyChanged

    Constructors

    SpinnerColumn()

    Initializes a new instance of the SpinnerColumn class.

    Declaration
    public SpinnerColumn()

    Properties

    Header

    Gets or sets the header for SpinnerColumnView.

    Declaration
    public object Header { get; set; }
    Property Value
    Type Description
    System.Object

    The default value is null.

    Remarks

    The spinner column header will be automatically collapsed, when value is null.

    Examples
    <spinner:SpinnerView x:Name="picker">
      <spinner:SpinnerView.Columns>
          <spinner:SpinnerColumn Header="Day" />
          <spinner:SpinnerColumn Header="Month" />
          <spinner:SpinnerColumn Header="Year" />
      </spinner:SpinnerView.Columns>
    </spinner:SpinnerView>

    HeaderTemplate

    Gets or sets the DataTemplate that defines the visual representation of the spinner column header.

    Declaration
    public DataTemplate HeaderTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.DataTemplate

    The DataTemplate that defines the visual representation of the spinner column header. The default value is null.

    Remarks

    The spinner column header will be automatically collapsed, when value is null. The Header value is the context of this template.

    Examples
    <Page.Resources>
        <DataTemplate x:Name="HeaderTemplate">
            <Grid Background="PaleGreen">
                <TextBlock Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Red"/>
            </Grid>
        </DataTemplate>
    </Page.Resources>
    <Grid>
        <spinner:SpinnerView x:Name="picker">
            <spinner:SpinnerView.Columns>
                <spinner:SpinnerColumn Header="Day" HeaderTemplate="{StaticResource HeaderTemplate}"/>
                <spinner:SpinnerColumn Header="Month" />
                <spinner:SpinnerColumn Header="Year" />
            </spinner:SpinnerView.Columns>
        </spinner:SpinnerView>
    </Grid>

    ItemContainerStyle

    Gets or sets the Microsoft.UI.Xaml.Style that is applied to the SpinnerItem generated for each item in SpinnerColumnView.

    Declaration
    public Style ItemContainerStyle { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.Style

    The style that is applied to container element generated for each item in SpinnerColumnView. The default value is null.

    Examples
    • XAML
    • C#
    <spinner:SpinnerView x:Name="picker">
      <spinner:SpinnerView.Columns>
         <spinner:SpinnerColumn x:Name="dayColumn" Header="Day">
           <spinner:SpinnerColumn.ItemContainerStyle>
              <Style TargetType="spinner:SpinnerItem" >
                 <Setter Property="FontStyle" Value="Italic" />
                 <Setter Property="FontSize" Value="14" />
                 <Setter Property="Foreground" Value="DarkBlue" />
              </Style>
           </spinner:SpinnerColumn.ItemContainerStyle>
         </spinner:SpinnerColumn>
         <spinner:SpinnerColumn Header="Month" />
         <spinner:SpinnerColumn Header="Year" />
      </spinner:SpinnerView.Columns>
    </spinner:SpinnerView>
    ObservableCollection<string> dayCollection = new ObservableCollection<string>();
    for (int i = 1; i <= 31; i++)
    {
       dayCollection.Add(i.ToString());
    }
    dayColumn.ItemsSource = dayCollection;

    ItemContainerStyleSelector

    Gets or sets the custom logic for choosing a style for SpinnerItem.

    Declaration
    public StyleSelector ItemContainerStyleSelector { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.Controls.StyleSelector

    A custom Microsoft.UI.Xaml.Controls.StyleSelector object that provides logic and returns a Microsoft.UI.Xaml.Style. The default is null.

    Examples
    • XAML
    • C#
    <Application.Resources>
      <Style x:Key="Style1" TargetType="picker:SpinnerItem">
          <Setter Property = "FontStyle" Value="Italic"/>
       </Style>
       <Style x:Key="Style2" TargetType="picker:SpinnerItem">
           <Setter Property = "FontStyle" Value="Oblique"/>
       </Style>
    </Application.Resources>
    <Page.Resources>
       <local:DayStyleSelector x:Key="dayStyleSelector"/>
    </Page.Resources>
    <Grid >
    <spinner:SpinnerView x:Name="picker">
       <spinner:SpinnerView.Columns>
           <spinner:SpinnerColumn x:Name="dayColumn" Header="Day" ItemContainerStyleSelector="{StaticResource dayStyleSelector}" />
           <spinner:SpinnerColumn Header="Month" />
           <spinner:SpinnerColumn Header="Year" />
        </spinner:SpinnerView.Columns>
    </spinner:SpinnerView>
    </Grid>
    public MainPage()
    {
       this.InitializeComponent();
       ObservableCollection<string> dayCollection = new ObservableCollection<string>();
       for (int i = 1; i <= 31; i++)
       {
           dayCollection.Add(i.ToString());
       }
       dayColumn.ItemsSource = dayCollection;
    }
    
    public class DayStyleSelector : StyleSelector
    {
       protected override Style SelectStyleCore(object item, DependencyObject container)
       {
         if (item != null)
         {
           if (int.Parse(item.ToString()) < 15)
              return Application.Current.Resources["Style1"] as Style;
           else
              return Application.Current.Resources["Style2"] as Style;
         }
         return base.SelectStyleCore(item, container);
       }
    }

    ItemHeight

    Gets or sets the uniform height for all SpinnerItem in SpinnerColumnView.

    Declaration
    public double ItemHeight { get; set; }
    Property Value
    Type Description
    System.Double

    The height of each item in SpinnerColumnView. The default value is 40. ItemHeight does not supports System.Double.NaN value.

    Examples
    <spinner:SpinnerView x:Name="picker">
      <spinner:SpinnerView.Columns>
          <spinner:SpinnerColumn Header="Day" ItemHeight="45" />
          <spinner:SpinnerColumn Header="Month" />
          <spinner:SpinnerColumn Header="Year" />
      </spinner:SpinnerView.Columns>
    </spinner:SpinnerView>

    ItemsSource

    Gets or sets a collection used to generate the content of SpinnerColumn.

    Declaration
    public IEnumerable<object> ItemsSource { get; set; }
    Property Value
    Type Description
    System.Collections.Generic.IEnumerable<System.Object>

    The default value is null.

    Remarks

    A collection that is used to generate the content of the SpinnerColumn.

    Examples
    • XAML
    • C#

    Below example shows, how to set ItemsSource in SpinnerColumn.

    <spinner:SpinnerView x:Name="picker">
      <spinner:SpinnerView.Columns>
         <spinner:SpinnerColumn x:Name="dayColumn" Header="Day" />
         <spinner:SpinnerColumn Header="Month" />
         <spinner:SpinnerColumn Header="Year" />
      </spinner:SpinnerView.Columns>
    </spinner:SpinnerView>
    ObservableCollection<string> dayCollection = new ObservableCollection<string>();
    for (int i = 1; i <= 31; i++)
    {
       dayCollection.Add(i.ToString());
    }
    dayColumn.ItemsSource = dayCollection;

    ItemTemplate

    Gets or sets the data template used to display each item in SpinnerColumnView.

    Declaration
    public DataTemplate ItemTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.DataTemplate

    The DataTemplate that defines the visual representation of the dropdown item. The default value is null.

    Examples
    • XAML
    • C#
    <spinner:SpinnerView x:Name="picker">
      <spinner:SpinnerView.Columns>
         <spinner:SpinnerColumn x:Name="dayColumn" Header="Day">
           <spinner:SpinnerColumn.ItemTemplate>
              <DataTemplate x:Name="SelectorItemTemplate">
                   <Grid Background="pink"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center">
                       <TextBlock Text="{Binding Item}"  Foreground="Red"/>
                   </Grid>
              </DataTemplate>
           </spinner:SpinnerColumn.ItemTemplate>
         </spinner:SpinnerColumn>
         <spinner:SpinnerColumn Header="Month" />
         <spinner:SpinnerColumn Header="Year" />
      </spinner:SpinnerView.Columns>
    </spinner:SpinnerView>
    ObservableCollection<string> dayCollection = new ObservableCollection<string>();
    for (int i = 1; i <= 31; i++)
    {
       dayCollection.Add(i.ToString());
    }
    dayColumn.ItemsSource = dayCollection;

    ItemTemplateSelector

    Gets or sets the custom logic for choosing a template used to display each item.

    Declaration
    public DataTemplateSelector ItemTemplateSelector { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.Controls.DataTemplateSelector

    A custom DataTemplateSelector object that provides logic and returns a DataTemplate. The default is null.

    Examples
    • XAML
    • C#
    <Application.Resources>
      <DataTemplate x:Name="SelectorItemTemplate1">
           <Grid Background = "Pink">
               <TextBlock Text="{Binding Item}"  Foreground="Yellow"/>
           </Grid>
      </DataTemplate>
       <DataTemplate x:Name="SelectorItemTemplate2">
           <Grid Background = "Orange" >
               < TextBlock Text="{Binding Item}" Foreground="Red"/>
           </Grid>
       </DataTemplate>
    </Application.Resources>
    <Page.Resources>
       <local:DayTemplateSelector x:Key="dayTemplateSelector"/>
    </Page.Resources>
    <Grid>
    <spinner:SpinnerView x:Name="picker">
       <spinner:SpinnerView.Columns>
           <spinner:SpinnerColumn x:Name="dayColumn" Header="Day" ItemTemplateSelector="{StaticResource dayTemplateSelector}"/>
           <spinner:SpinnerColumn Header="Month"/>
           <spinner:SpinnerColumn Header="Year"/>
        </spinner:SpinnerView.Columns>
    </spinner:SpinnerView>
    </Grid>
    public MainPage()
    {
       this.InitializeComponent();
       ObservableCollection<string> dayCollection = new ObservableCollection<string>();
       for (int i = 1; i <= 31; i++)
       {
           dayCollection.Add(i.ToString());
       }
       dayColumn.ItemsSource = dayCollection;
    }
    
    public class DayTemplateSelector : DataTemplateSelector
    {
       protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
       {
         if (item != null)
         {
           if (int.Parse(item.ToString()) < 15)
               return Application.Current.Resources["SelectorItemTemplate1"] as DataTemplate;
           else
               return Application.Current.Resources["SelectorItemTemplate2"] as DataTemplate;
         }
         return base.SelectTemplateCore(item, container);
       }
    }

    ItemWidth

    Gets or sets the uniform width for all SpinnerItem in SpinnerColumnView.

    Declaration
    public double ItemWidth { get; set; }
    Property Value
    Type Description
    System.Double

    The width of each items in SpinnerColumnView. The default value is 80.

    Remarks

    If ItemWidth is NaN, item will automatically resize according to its content.

    Examples
    <spinner:SpinnerView x:Name="picker">
      <spinner:SpinnerView.Columns>
          <spinner:SpinnerColumn Header="Day" ItemWidth="150" />
          <spinner:SpinnerColumn Header="Month" />
          <spinner:SpinnerColumn Header="Year" />
      </spinner:SpinnerView.Columns>
    </spinner:SpinnerView>

    MaxItemWidth

    Gets or sets the maximum width for all SpinnerItem in SpinnerColumnView.

    Declaration
    public double MaxItemWidth { get; set; }
    Property Value
    Type Description
    System.Double

    The maximum width of each item in SpinnerColumnView items. The default value is System.Double.PositiveInfinity.

    MinItemWidth

    Gets or sets the minimum width for all SpinnerItem in SpinnerColumnView.

    Declaration
    public double MinItemWidth { get; set; }
    Property Value
    Type Description
    System.Double

    The minimum width of each item in SpinnerColumnView items. The default value is 0.

    SelectedIndex

    Gets or sets the index specifying the currently selected item in SpinnerColumnView.

    Declaration
    public int SelectedIndex { get; set; }
    Property Value
    Type Description
    System.Int32

    The default value is 0.

    Remarks

    If SelectedIndex is less than zero or greater than ItemsSource count, then thrown ArgumentOutOfRangeException.

    Examples
    • XAML
    • C#
    <spinner:SpinnerView x:Name="picker">
      <spinner:SpinnerView.Columns>
         <spinner:SpinnerColumn x:Name="dayColumn" SelectedIndex="5" Header="Day" />
         <spinner:SpinnerColumn Header="Month" />
         <spinner:SpinnerColumn Header="Year" />
      </spinner:SpinnerView.Columns>
    </spinner:SpinnerView>
    ObservableCollection<string> dayCollection = new ObservableCollection<string>();
    for (int i = 1; i <= 31; i++)
    {
       dayCollection.Add(i.ToString());
    }
    dayColumn.ItemsSource = dayCollection;

    SelectedItem

    Gets the content of the SelectedItem in SpinnerColumnView.

    Declaration
    public virtual object SelectedItem { get; }
    Property Value
    Type Description
    System.Object

    ShouldLoop

    Gets or sets a value indicating whether the items should appear in cyclic format in the panel or not.

    Declaration
    public bool ShouldLoop { get; set; }
    Property Value
    Type Description
    System.Boolean

    The default value is true.

    Remarks

    Setting false will disable looping.

    Examples
    • XAML
    • C#
    <spinner:SpinnerView x:Name="picker">
      <spinner:SpinnerView.Columns>
         <spinner:SpinnerColumn x:Name="dayColumn" ShouldLoop="False" Header="Day" />
         <spinner:SpinnerColumn Header="Month" />
         <spinner:SpinnerColumn Header="Year" />
      </spinner:SpinnerView.Columns>
    </spinner:SpinnerView>
    ObservableCollection<string> dayCollection = new ObservableCollection<string>();
    for (int i = 1; i <= 31; i++)
    {
       dayCollection.Add(i.ToString());
    }
    dayColumn.ItemsSource = dayCollection;

    ShowHeader

    Gets or sets a value indicating whether the spinner column header can be shown or not.

    Declaration
    public bool ShowHeader { get; set; }
    Property Value
    Type Description
    System.Boolean

    true if spinner column header is shown; otherwise, false.The default value is false.

    Examples
    <spinner:SpinnerView x:Name="picker">
      <spinner:SpinnerView.Columns>
          <spinner:SpinnerColumn Header="Day"/>
          <spinner:SpinnerColumn Header="Month" ShowHeader="True"/>
          <spinner:SpinnerColumn Header="Year"/>
      </spinner:SpinnerView.Columns>
    </spinner:SpinnerView>

    Methods

    ItemPrepared(ISpinnerItemInfo, SpinnerItem)

    Helps to update the specific item in an view.

    Declaration
    public virtual void ItemPrepared(ISpinnerItemInfo itemInfo, SpinnerItem spinnerItem)
    Parameters
    Type Name Description
    ISpinnerItemInfo itemInfo

    The spinner item info.

    SpinnerItem spinnerItem

    The spinner item.

    OnSelectionChanged(SpinnerItemSelectionChangedEventArgs)

    Occurs when the selection is changed in SpinnerColumnView.

    Declaration
    protected virtual void OnSelectionChanged(SpinnerItemSelectionChangedEventArgs eventArgs)
    Parameters
    Type Name Description
    SpinnerItemSelectionChangedEventArgs eventArgs

    The SpinnerItemSelectionChangedEventArgs that contains details regarding old and new selected index value.

    Remarks

    This method occurs whenever there is a change to a selection. A selection can be changed by user interaction like scrolling, key navigation as well as other set values.

    Implements

    System.ComponentModel.INotifyPropertyChanged
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved