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.

<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

WinUI- v20.3.0.47

Class SpinnerColumn

Inheritance

Implements

Inherited Members

Namespace: Syncfusion.UI.Xaml.Editors

Assembly: Syncfusion.Editors.WinUI.dll

Syntax

Constructors

SpinnerColumn()

Declaration

Properties

Header

Declaration

Property Value

Remarks

Examples

HeaderTemplate

Declaration

Property Value

Remarks

Examples

ItemContainerStyle

Declaration

Property Value

Examples

ItemContainerStyleSelector

Declaration

Property Value

Examples

ItemHeight

Declaration

Property Value

Examples

ItemsSource

Declaration

Property Value

Remarks

Examples

ItemTemplate

Declaration

Property Value

Examples

ItemTemplateSelector

Declaration

Property Value

Examples

ItemWidth

Declaration

Property Value

Remarks

Examples

MaxItemWidth

Declaration

Property Value

MinItemWidth

Declaration

Property Value

SelectedIndex

Declaration

Property Value

Remarks

Examples

SelectedItem

Declaration

Property Value

ShouldLoop

Declaration

Property Value

Remarks

Examples

ShowHeader

Declaration

Property Value

Examples

Methods

ItemPrepared(ISpinnerItemInfo, SpinnerItem)

Declaration

Parameters

OnSelectionChanged(SpinnerItemSelectionChangedEventArgs)