Fatal编程技术网
  • xaml/
  • Xaml GridView有两列，填充宽度

Xaml GridView有两列，填充宽度

xaml gridview windows-runtime windows-phone-8.1

Xaml GridView有两列，填充宽度,xaml,gridview,windows-runtime,windows-phone-8.1,Xaml,Gridview,Windows Runtime,Windows Phone 8.1,我想要实现的结果非常简单，一个包含两列的列表，两列的宽度相等。在Windows Phone 7/8中，使用带有WrapPanel的ListBox作为ItemsPanel并将ItemWidth设置为240（屏幕宽度为480），可以轻松实现这一点 现在我正在编写一个通用应用程序，但这里的问题是，屏幕的宽度不能保证为480（甚至对手机来说似乎也是如此），因此我无法设置ItemWidth，因为我希望它填充屏幕的宽度。使用以下XAML，我几乎达到了预期效果： <GridView ItemsSourc

我想要实现的结果非常简单，一个包含两列的列表，两列的宽度相等。在Windows Phone 7/8中，使用带有
WrapPanel
的
ListBox
作为
ItemsPanel
并将
ItemWidth
设置为240（屏幕宽度为480），可以轻松实现这一点

现在我正在编写一个通用应用程序，但这里的问题是，屏幕的宽度不能保证为480（甚至对手机来说似乎也是如此），因此我无法设置
ItemWidth
，因为我希望它填充屏幕的宽度。使用以下
XAML
，我几乎达到了预期效果：

<GridView ItemsSource="{Binding Results}" Margin="12">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image Source="{Binding SampleImage}" />
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>

    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid MaximumRowsOrColumns="2" Orientation="Horizontal" HorizontalChildrenAlignment="Stretch" VerticalChildrenAlignment="Stretch">
            </WrapGrid>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>
结果如下：

如图所示，它成功地给出了两个宽度相等的列，但是
GridView.ItemTemlate
中的
Grid
并没有填充每列的整个宽度。我尝试在
网格和
网格视图本身上设置
HorizontalAlignment=“Stretch”
，但没有成功。有人知道这个吗？你可以试试这个：


<GridView.ItemContainerStyle>
    <Style
        TargetType="GridViewItem">
        <Setter
            Property="HorizontalAlignment"
            Value="Stretch" />
        <Setter
            Property="VerticalAlignment"
            Value="Stretch" />
    </Style>
 </GridView.ItemContainerStyle>


其中，
DoubleViewModel
是：


public class DoubleViewModel : BindableBase
{
    #region Value
    /// <summary>
    /// Backing field for the Value property.
    /// </summary>
    private double value;

    /// <summary>
    /// Gets or sets a value indicating the value.
    /// </summary>
    public double Value
    {
        get { return this.value; }
        set { this.SetProperty(ref this.value, value); }
    }
    #endregion
}



公共类DoubleViewModel:BindableBase
{
#区域值
/// 
///Value属性的支持字段。
/// 
私人双重价值；
/// 
///获取或设置一个指示该值的值。
/// 
公共双重价值
{
获取{返回this.value；}
set{this.SetProperty（ref this.value，value）；}
}
#端区
}

我使用的解决方案基于Filip Skakuns的建议，但通过使用此行为创建可重用的用户控件，实现略有不同。用户控件具有（除其他外）
列
和
项资源
属性。我更改
ItemsWrapGrid
的
ItemWidth
，而不是
ItemTemplate
的宽度，并直接在
SizeChanged
事件处理程序中执行此操作

我还需要使用
ItemsWrapGrid
而不是
WrapGrid
来实现这一点。最终用户控件的XAML：


<UserControl
    x:Class="MyProject.CustomControls.ColumnGridView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="ControlRoot">

    <Grid DataContext="{Binding ElementName=ControlRoot}">
        <GridView ItemsSource="{Binding ItemsSource}" ItemTemplate="{Binding ItemTemplate}">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid Orientation="Horizontal" SizeChanged="ItemsWrapGrid_SizeChanged" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>
    </Grid>
</UserControl>






对于隐藏的代码：


使用系统；
使用Windows.UI.Xaml；
使用Windows.UI.Xaml.Controls；
命名空间MyProject.CustomControls
{
公共密封部分类ColumnGridView:UserControl
{
公共静态只读DependencyProperty ItemTemplateProperty=
Register（“ItemTemplate”、typeof（DataTemplate）、typeof（ColumnGridView）、newpropertyMetadata（null））；
公共数据模板ItemTemplate
{
获取{return（DataTemplate）GetValue（ItemTemplateProperty）；}
set{SetValue（ItemTemplateProperty，value）；}
}
公共静态只读依赖项Property ItemsSourceProperty=
Register（“ItemsSource”、typeof（object）、typeof（ColumnGridView）、newpropertyMetadata（null））；
公共对象项资源
{
获取{return（object）GetValue（ItemsSourceProperty）；}
set{SetValue（ItemsSourceProperty，value）；}
}
公共静态只读依赖项属性列属性=
Register（“Columns”、typeof（int）、typeof（ColumnGridView）、newpropertyMetadata（1））；
公共int列
{
获取{return（int）GetValue（ColumnsProperty）；}
设置
{

如果（valueI能够解决非常类似的问题，只需将项目宽度绑定到父实际宽度，如下所示：


<ListView Name="allDevicesListView" d:DataContext="{d:DesignData /SampleData/VeraServerSampleData.xaml}" ItemsSource="{Binding Devices}">
<ListView.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal" Width="{Binding ElementName=allDevicesListView, Path=ActualWidth}">
            <Grid Width="{Binding ElementName=allDevicesListView, Path=ActualWidth}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Name}" FontSize="24" Grid.Column="0" Margin="0,0,14.333,0" />
                <local:VeraDeviceControl VeraDeviceCategory="DimmableLight" Width="auto" Grid.Column="1"/>
            </Grid>
        </StackPanel>
    </DataTemplate>
</ListView.ItemTemplate>







或者，您可以使用
WrapGrid
中加载的事件至少设置
ItemWidth

XAML
例子
我的解决方案是：


<GridView ItemsSource="{Binding Results}" Margin="12"
                       SizeChanged="GridView_SizeChanged"
                       x:Name="MyGridView">
<GridView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Image Source="{Binding SampleImage}" />
        </Grid>
    </DataTemplate>
</GridView.ItemTemplate>

<GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Stretch"/>
            </Style>
</GridView.ItemContainerStyle>
</GridView>



谢谢。不幸的是，第一个建议不起作用。但是如果ItemsPanel从WrapGrid更改为ItemsWrapGrid，第二个建议是可能的。您好，您能再解释一下吗？我不明白，您希望我扩展哪一部分？基于ListViewItem为ListView尝试了类似的技术，将HorizontalAlignment设置为Stretch等等不起作用。这在Silverlight中使用过！也可以尝试HorizontalContentAlignment？这是一个很好的解决方案，但不幸的是，由于某些原因，它在设计时模式下不能很好地发挥作用。当在XAML中手动定义ListVewItems时，这似乎起作用。但是，当根据ItemSource的绑定创建项时，这不起作用。I事实上，我什么也看不到。那不是真的。这是一段正在工作的代码，其中的项是由ItemsSource的绑定创建的（仔细看，ListView绑定到Devices observable集合）。如果您将其绑定到一个可观察的集合，然后将项目添加到此集合，而不是通过代码直接定义ItemsSource绑定，那么可能会发生这种情况？出于某种原因，我得到了相同的结果，宽度和高度绑定不起作用。我正在使用itemsource的可观察集合。

<Grid Background="LightGreen">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="0" Grid.Column="0" Name="MyGrid" Background="Red">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="60" />
            <ColumnDefinition Width="60" />
            <ColumnDefinition Width="60" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" />
        <TextBlock Grid.Column="1" Text="I.O" />
        <TextBlock Grid.Column="2" Text="N.V" />
        <TextBlock Grid.Column="3" Text="n.I.O" />
    </Grid>

    <Grid Grid.Row="0" Grid.Column="1" Background="Aqua">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="60" />
            <ColumnDefinition Width="60" />
            <ColumnDefinition Width="60" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" />
        <TextBlock Grid.Column="1" Text="I.O" />
        <TextBlock Grid.Column="2" Text="N.V" />
        <TextBlock Grid.Column="3" Text="n.I.O" />
    </Grid>

    <GridView Grid.Row="1"  Grid.ColumnSpan="2"
              Background="LightBlue"
              HorizontalAlignment="Stretch"
              ItemsSource="{Binding Details}"
              ItemContainerStyle="{StaticResource GridViewItemStyleIOhneHover}"
              ItemTemplateSelector="{StaticResource MyProtokollElementDataTemplateSelector}">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapGrid Orientation="Horizontal"
                          HorizontalAlignment="Stretch"
                          MaximumRowsOrColumns="2"
                          HorizontalChildrenAlignment="Stretch"
                          VerticalChildrenAlignment="Stretch" Loaded="MyWrapGrid_Loaded">
                </WrapGrid>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>
</Grid>



    private void MyWrapGrid_Loaded(object sender, RoutedEventArgs e)
    {
        var wg = sender as WrapGrid;
        wg.ItemWidth = MyGrid.ActualWidth;
    }



<GridView ItemsSource="{Binding Results}" Margin="12"
                       SizeChanged="GridView_SizeChanged"
                       x:Name="MyGridView">
<GridView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Image Source="{Binding SampleImage}" />
        </Grid>
    </DataTemplate>
</GridView.ItemTemplate>

<GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Stretch"/>
            </Style>
</GridView.ItemContainerStyle>
</GridView>



private void GridView_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        var panel = (ItemsWrapGrid)MyGridView.ItemsPanelRoot;
        panel.ItemWidth =panel.ItemHeight= e.NewSize.Width / 2;
    }