Zadávanie údajov pomocou prvku typu Spinner

Pri nastavovaní rôznych parametrov je na dotykových displejoch zvykom nastavovať číselné hodnoty nie zadaním hodnoty do TextBoxu pomocou dotykovej klávesnice, ale interaktívnejšie – pomocou prvku typu spinner. Typickým príkladom je zadávanie času pomocou TimePicker. Pre zadávanie číselných hodnôt, však takýto prvok implementovaný nie je. Potreboval som pre aplikáciu Weight Monitor zadávať výšku a váhu osoby. Preto som si vytvoril vlastný prvok na báze prvkov ScrollViewer, StackPanet a poľa prvkov Text Block. Prvok umožňuje zvýrazniť zadanú hodnotu. Je to vlastne akýsi sofistikovanejší ekvivalent ListBoxu. Na obrázku je príklad prvku pre zadanie výšky osoby.

XAML kód je triviálny

<ScrollViewer x:Name=”scrollviewer_Vyska” HorizontalAlignment=”Left” Height=”161″ VerticalAlignment=”Top” Width=”137″ FontFamily=”Global User Interface” Tapped=”vyska_changed”
Loaded=”scrollviewer_vyska_Loaded”>
<ScrollViewer.Background>
<LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>
<GradientStop Color=”DarkGray”/>
<GradientStop Color=”LightGray” Offset=”1″/>
</LinearGradientBrush>
</ScrollViewer.Background>
<StackPanel x:Name=”stackpanel_vyska” Height=”282″ Width=”203″ Loaded=”stackpanel_vyska_Loaded” >
<StackPanel Height=”282″/>
</StackPanel>
</ScrollViewer>

Kód pre inicializáciu

//prvok pre zadavanie vysky
ScrollViewer scrollviewer_vyska = null;
StackPanel stackpanel_vyska = null;
const int FONT_SIZE = 24;
const int DELTA_SIZE = 16;
const int PADDING = 12;
TextBlock[] vyska_text_list;
SolidColorBrush select_brush, deselect_brush;

V konštruktore MainPage

//prvok pre zadanie vysky

vyska_text_list = new TextBlock[260]; //rozsah od 50 do 250 cm
stackpanel_vyska = new StackPanel();
select_brush = new SolidColorBrush();
deselect_brush = new SolidColorBrush();
select_brush.Color = Windows.UI.Colors.Yellow;
deselect_brush.Color = Windows.UI.Colors.White;
for (int i = 0; i < 260; i++)
{
vyska_text_list[i] = new TextBlock();
vyska_text_list[i].FontSize = FONT_SIZE;
 vyska_text_list[i].Padding = new Thickness(PADDING);
vyska_text_list[i].Foreground = deselect_brush;
vyska_text_list[i].Text = i.ToString();
if (i == 170)
{
vyska_text_list[i].FontSize += DELTA_SIZE;
vyska_text_list[i].Foreground = select_brush;
}
stackpanel_vyska.Children.Add(vyska_text_list[i]);
}

 

Metódy obsluhy udalosti

//zmena ovladacieho prvku pre vysku

private void vyska_changed(object sender, TappedRoutedEventArgs e)
{
double dP = scrollviewer_vyska.VerticalOffset;
for (int i = 0; i < 260; i++)
{
vyska_text_list[i].Foreground = deselect_brush;
 vyska_text_list[i].FontSize = FONT_SIZE;
if (vyska_text_list[i] == e.OriginalSource)
{
vyska_text_list[i].FontSize += DELTA_SIZE;
vyska_text_list[i].Foreground = select_brush;
}
}
}

private void scrollviewer_vyska_Loaded(object sender, RoutedEventArgs e)
{
scrollviewer_vyska = sender as ScrollViewer;
scrollviewer_vyska.Content = stackpanel_vyska;
}private void stackpanel_vyska_Loaded(object sender, RoutedEventArgs e)
{
stackpanel_vyska = sender as StackPanel;
}

private void scrollviewer_Vyska_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
scrollviewer_vyska.ChangeView(0, 1200,1);
}

 

 

 

 

Reklamy

Pridaj komentár

Zadajte svoje údaje, alebo kliknite na ikonu pre prihlásenie:

WordPress.com Logo

Na komentovanie používate váš WordPress.com účet. Odhlásiť sa / Zmeniť )

Twitter picture

Na komentovanie používate váš Twitter účet. Odhlásiť sa / Zmeniť )

Facebook photo

Na komentovanie používate váš Facebook účet. Odhlásiť sa / Zmeniť )

Google+ photo

Na komentovanie používate váš Google+ účet. Odhlásiť sa / Zmeniť )

Connecting to %s


%d bloggers like this: