Picker / Datepicker / Timepicker

Egyszerű verzió

XAML
<Picker x:Name="SimplePicker" SelectedIndexChanged="SimplePicker_SelectedIndexChanged">
    <Picker.Items>
        <x:String>Első</x:String>
        <x:String>Második</x:String>
        <x:String>Harmadik</x:String>
    </Picker.Items>
</Picker>
- SelectedIndexChanged-ben megadott függvény már az elem betöltése után az alapértelmezett értékkel lefut.
 
C#
// Elemek felvitele a SimplePicker-be
private void AddToSimplePicker()
{
    // Elem hozzáadása
    SimplePicker.Items.Add("Negyedik");
 
    // Elem elvétele
    SimplePicker.Items.Remove("Első");
 
    // Első elem kiválasztása
    SimplePicker.SelectedIndex = 0;
 
}
 
// SimplePicker esetén egy kiválasztás lekezelése
private void SimplePicker_SelectedIndexChanged(object sender, EventArgs e)
{
    // Kiválasztott elem lekérdezése
    var picker = (Picker)sender;
    String SelectedItem = picker.SelectedItem.ToString();
 
    // Kiválasztott elem kiíratása konzolra
    Console.WriteLine(SelectedItem);
}

 

Komplex verzió

using System.Collections.ObjectModel;

XAML

<Picker x:Name="ComplexPicker" ItemDisplayBinding="{Binding Name}" SelectedIndexChanged="ComplexPicker_SelectedIndexChanged"/>

- Binding esetén a Name a TypeElement osztály Name mezője!

- SelectedIndexChanged-ben megadott függvény már az elem betöltése után az alapértelmezett értékkel lefut.
 
C#
// Osztály létrehozása
public class TypeElement
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
}
 
// Gyűjtemény létrehozása
ObservableCollection<TypeElement> typeCollection = new ObservableCollection<TypeElement>();
 
// Elemek felvitele a ComplexPicker-be
private void AddToComplexPicker()
{
    // Lista forrás megadása
    ComplexPicker.ItemsSource = typeCollection;
 
    // Elemek felvitele
    typeCollection.Add(new TypeElement { Id = 1, Name = "Szöveg", Description = "Szöveges mező behelyezése" });
    typeCollection.Add(new TypeElement { Id = 2, Name = "Kép", Description = "Képek és ábrák behelyéze" });
    typeCollection.Add(new TypeElement { Id = 3, Name = "Táblázat", Description = "Táblázat behelyezése" });
 
    // Első elem kiválasztása
    ComplexPicker.SelectedIndex = 0;
}
 
// ComplexPicker esetén egy kiválasztás lekezelése
private void ComplexPicker_SelectedIndexChanged(object sender, EventArgs e)
    // Kiválasztott elem lekérdezése
    var picker = (Picker)sender;
    TypeElement SelectedItem = (TypeElement)picker.SelectedItem;
    
    // Elemhez tartozó értékek elmentése változókba
    int id = SelectedItem.Id;
    string name = SelectedItem.Name;
    string description = SelectedItem.Description;
 
    // Eredmény kiíratása konzolra
    Console.WriteLine(id + "/" + name + "/" + description);
}

 

Dátum kiválasztása

XAML

<DatePicker x:Name="MyDatePicker" Format="yyyy-MM-dd" Date="2010-01-01" MinimumDate="1988-06-05" MaximumDate="2019-12-31" DateSelected="MyDatePicker_DateSelected" />

- Format: Formátum megadása a C#-ban megszokott módon

- Date: Aktuális dátum

- MinimumDate: Legkisebb elfogadható dátum (Év, év-hónap vagy év-hónap-nap -- a régebbi dátumok inaktívak)

- MaximumDate: Legnagyobb elfogadható dátum (Év, év-hónap vagy év-hónap-nap -- a régebbi dátumok inaktívak)

- DateSelected: Érték módosítása után lefutó függvény

- Ha DateSelected helyett a PropertyChanged van alkalmazva, akkor a DatePicker elem betöltésekor már az aktuális értékkel lefut a hozzárendelt függvény. Amíg a DateSelected esetén csak az első tényleges kiválasztás után történik ezen függvény lefutásra.

C#

// DátumPicker esetén egy kiválasztás lekezelése (DateSelected esetén használatakor)
private void MyDatePicker_DateSelected(object sender, DateChangedEventArgs e)
{
    int Year = MyDatePicker.Date.Year;
    int Month = MyDatePicker.Date.Month;
    int Day = MyDatePicker.Date.Day;
    MyDatePickerSelected.Text = "Év: " + Year + " / Hónap: " + Month + " / Nap: " + Day;
}
 
// DátumPicker esetén egy kiválasztás lekezelése (PropertyChanged használatakor)
private void MyDatePicker_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    int Year = MyDatePicker.Date.Year;
    int Month = MyDatePicker.Date.Month;
    int Day = MyDatePicker.Date.Day;
    MyDatePickerSelected.Text = "Év: " + Year + " / Hónap: " + Month + " / Nap: " + Day;
}
 
Android esetén a felugró dátumválasztó színe
- Projekt.Android > Resources > values > styles.xml fájlon belül
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    [...]
    <item name="android:datePickerDialogTheme">@style/DatePickerDialogStyle</item>
</style>
<style name="DatePickerDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#1976D2</item>
 </style>
 

Időpont kiválasztása

XAML

<TimePicker x:Name="MyTimePicker" Format="HH:mm" Time="11:11" PropertyChanged="MyTimePicker_PropertyChanged"/>

Format: Formátum megadása a C#-ban megszokott módon

- Time: Aktuális idő

- PropertyChanged: Érték módosítása után lefutó függvény

C#

// TimePicker esetén egy kiválasztás lekezelése
private void MyTimePicker_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    int Hours = MyTimePicker.Time.Hours;
    int Minutes = MyTimePicker.Time.Minutes;
    MyTimePickerSelected.Text = "Óra: " + Hours + " / Perc: " + Minutes;
}
 
Android esetén a felugró időválasztó színe
- Projekt.Android > Resources > values > styles.xml fájlon belül 
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    [...]
    <item name="android:timePickerDialogTheme">@style/TimePickerDialogStyle</item>
</style>
<style name="TimePickerDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#1976D2</item>
 </style>

 

Mobilos kategóriák: