GridView s nerovnako veľkými grafickými objektami

 

V dizajnových princípoch pre Windows 8 sa odporúča pre rozlíšenie kontextu využívať aj veľkosť grafických blokov. V praxi to znamená prvok GridView s premenlivou veľkosťou objektov, pričom veľkosť sa spravidla odvodí podľa niektorého atribútu dátového modelu, na ktorý je prvok GridView napojený

Túto situáciu som musel riešiť, aby som zrealizoval konkrétny dizajnový návrh pre svoju aplikáciu.

Ukážem jednu z možností, pomocou odvodenej triedy od GridViev. Vytvorte projekt typu Blank Application. V súbore MainPage.xaml.cs v konštruktore triedy MainPage

using Windows.UI;

using System.Reflection;

 

public MainPage()

{

this.InitializeComponent();

 

var _Colors = typeof(Colors)

.GetRuntimeProperties()

.Select(c => new

{

Color = (Color)c.GetValue(null),

Name = c.Name

});

 

this.DataContext = _Colors;

}

 

MainPage.xaml

<Grid Background=”{StaticResource ApplicationPageBackgroundThemeBrush}”>

<GridView x:Name=”gw” ItemsSource=”{Binding}”>

<GridView.ItemTemplate>

<DataTemplate>

<Grid Height=”100″ Width=”150″>

<Grid.Background>

<SolidColorBrush Color=”{Binding Color}” />

</Grid.Background>

</Grid>

</DataTemplate>

</GridView.ItemTemplate>

</GridView>

</Grid>

 

Všetky prvky sú rovnako veľké

Zobrazenie farieb prostredníctvom GridView

Ak pridáme názov farby, dostanete z toho celkom zmysluplnú obrazovku, ktorú môžete použiť trebárs na nastavovanie farieb, prípadne úpravy farebnej palety. V našom príklade sme okrem názvu pridali aj index farby

<GridView x:Name=”gw” ItemsSource=”{Binding}”>

<GridView.ItemTemplate>

<DataTemplate>

<Grid Height=”100″ Width=”150″>

<Grid.Background>

<SolidColorBrush Color=”{Binding Color}” />

</Grid.Background>

<StackPanel VerticalAlignment=”Top”>

<StackPanel.Background>

<SolidColorBrush Color=”Black” Opacity=”.75″ />

</StackPanel.Background>

<TextBlock FontSize=”15″ Margin=”10″ >

<Run Text=”{Binding Index}” />. <Run Text=”{Binding Name}” />

</TextBlock>

</StackPanel>

</Grid>

</DataTemplate>

</GridView.ItemTemplate>

</GridView>

Zobrazenie farieb prostredníctvom GridView

Nová trieda nazvaná napríklad VarGridView odvodená od GridView sa pude snažiť nastaviť zadaný parameter RowSpan a ColSpan. Ak sa to nepodarí, zostane hodnota týchto parametrov implicitne nastavená na hodnotu 1

public class VarGridView : GridView

{

protected override void

PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element,

object item)

{

try

{

dynamic _Item = item;

element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.

ColumnSpanProperty, _Item.ColSpan);

element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.

RowSpanProperty, _Item.RowSpan);

}

catch

{

element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.

ColumnSpanProperty, 1);

element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.

RowSpanProperty, 1);

}

finally

{

base.PrepareContainerForItemOverride(element, item);

}

}

}

 

 

Upravíme kód súbore MainPage.xaml.cs. Využijeme index farby a v metódach RowSpan a ColSpan nastavíme pre požadované hodnoty indexov farieb, v našom prípade pre objekt 0 a 2 iné rozmery dlaždíc.

 

public MainPage()

{

this.InitializeComponent();

 

var _Colors = typeof(Colors)

.GetRuntimeProperties()

.Select((c,i) => new

{

Color = (Color)c.GetValue(null),

Name = c.Name,

Index = i,

ColSpan = ColSpan(i),

RowSpan = RowSpan(i)

 

});

 

this.DataContext = _Colors;

}

 

private object RowSpan(int i)

{

if (i == 0) return 3;

if (i == 2) return 2;

return 1;

}

 

private object ColSpan(int i)

{

if (i == 0) return 3;

if (i == 2) return 2;

return 1;

}

 

Variabilná veľkosť prvkov

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: