Элементы сетки в виде квадратов в WinRT (метро) - PullRequest
Новая
       8

Элементы сетки в виде квадратов в WinRT (метро)

1 голос
/ 29 марта 2012

Я боролся с этим несколько дней и не могу заставить его работать.Может быть, я не настолько хороший программист XAML, как я надеялся, что буду:)

В любом случае, моя проблема в том, что я хочу привязать несколько элементов к GridView и заставить их отображаться в виде квадратов без установки какой-либо ширины.и высота.Причина в том, что я хочу, чтобы мои элементы GridView увеличивались / уменьшались и расширялись до максимального размера при изменении разрешения или размера экрана.

Вот мой XAML: 

<UserControl.Resources>

    <Style x:Key="MyItemContainerStyle" TargetType="ListViewItem">
        <Setter Property="FontFamily" Value="Segoe UI" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <!--<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource Self}, Path=Width}" />-->
    </Style>

    <DataTemplate x:Key="MyItemTemplate">
        <Border CornerRadius="4" 
                BorderBrush="Black"  
                BorderThickness="1"
                Background="Blue">
            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">X</TextBlock>
        </Border>
    </DataTemplate>

    <ItemsPanelTemplate x:Key="MyItemsPanelTemplate">
        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" />
    </ItemsPanelTemplate>

</UserControl.Resources>

<Grid Background="White">
    <GridView x:Name="MyGrid"
              UseLayoutRounding="True"
              ItemTemplate="{StaticResource MyItemTemplate}"
              ItemsPanel="{StaticResource MyItemsPanelTemplate}"
              ItemContainerStyle="{StaticResource MyItemContainerStyle}"
              ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
    </GridView>
</Grid>

И этомой код отстает: 

public sealed partial class BlankPage : Page
{
    public BlankPage()
    {
        this.InitializeComponent();

        MyGrid.Items.Add(new ListViewItem { Content = 1 });
        MyGrid.Items.Add(new ListViewItem { Content = 2 });
        MyGrid.Items.Add(new ListViewItem { Content = 3 });
    }

    /// <summary>
    /// Invoked when this page is about to be displayed in a Frame.
    /// </summary>
    /// <param name="e">Event data that describes how this page was reached.  The Parameter
    /// property is typically used to configure the page.</param>
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
    }
}

Это, однако, приводит к выводу, как это (прямоугольные элементы, а не квадраты):

Ouput

Буду признателен, если кто-токто знает немного больше о разработке XAML и WinRT (metro), чем я, может объяснить это для меня и, возможно, дать мне рабочий пример.

Спасибо!

РЕДАКТИРОВАТЬ

Я получил подсказку, чтобы обернуть мою границу в окне просмотра, так как она, кажется, обладает некоторыми способностями к масштабированию / растяжению.

Я играл пару часов, но не могу его получитьработать на 100%.

Теперь это мой XAML: 

<UserControl.Resources>

<Style x:Key="MyItemContainerStyle" TargetType="ListViewItem">
    <Setter Property="FontFamily" Value="Segoe UI" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>

<DataTemplate x:Key="MyItemTemplate">
    <Viewbox>
        <Border CornerRadius="3" 
        BorderBrush="Black"  
        BorderThickness="1">
            <Grid Background="Blue" MinHeight="50" MinWidth="50">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">X</TextBlock>
            </Grid>
        </Border>
    </Viewbox>
</DataTemplate>

<ItemsPanelTemplate x:Key="MyItemsPanelTemplate">
    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
    </StackPanel>
</ItemsPanelTemplate>

</UserControl.Resources>

<Grid Background="White">
    <GridView x:Name="MyGrid"
      UseLayoutRounding="True"
      ItemTemplate="{StaticResource MyItemTemplate}"
      ItemsPanel="{StaticResource MyItemsPanelTemplate}"
      ItemContainerStyle="{StaticResource MyItemContainerStyle}"
      ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled">
    </GridView>
</Grid>

Это дает такой вывод:

output2

Теперь, похоже,растянуть себя на квадрат, но он растягивается за пределами экрана.Я также запустил этот пример в нескольких версиях и размерах экрана, и он показывает тот же вывод, что означает, что он масштабируется правильно.

Помощь будет принята с благодарностью.

Спасибо!

1 Ответ

0 голосов
/ 30 марта 2012

Ваша закомментированная привязка близка к чему-то, что может отчасти работать - только вам нужно привязать к ActualWidth: 

<Setter Property="Height" Value="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" />

В целом, я бы предложил использовать жестко закодированные значения - они упрощают компоновку ЦП, облегчают детерминистический дизайн и будут масштабироваться Windows, когда этого потребуют размер экрана и разрешение. Если вам нужен больший контроль над этим, вы можете привязать ширину и высоту к одному и тому же значению из модели представления, которую вы меняете в зависимости от необходимости, или написать преобразователь, который преобразует жестко запрограммированное значение ширины / высоты в фактическое значение в зависимости от обнаруженного экрана. размер / разрешение или настройки.

...