1

为了掌握 Windows Phone 8 和 XAML，我开始了一个简单的测试项目。我的数据透视视图中有一个 longlistselector，它在平面列表中显示数据条目；当用户想要从列表中删除项目时，他可以点击“选择”应用程序栏按钮，复选框会出现在列表中每一行的开头。为此，我处理“选择”应用程序栏按钮的点击事件，并将 longlistselector 的 and 设置Itemtemplate为ListHeaderTemplate数据模板，包括所需的复选框 - 我不知道这是否是这样做的方法，但它是有道理的大部头书。

不过，我的问题是，当显示包含复选框的 DataTemplate 时，会裁剪复选框，如下面的屏幕截图所示：

在此处输入图像描述

这是包含复选框的 DataTemplate 的 XAML：

    <DataTemplate x:Key="ExpensesEditListTemplate">
        <Grid HorizontalAlignment="Stretch" Width="420">
            <Grid.RowDefinitions>
                <RowDefinition Height="48" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="48" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <CheckBox 
                IsChecked="False" 
                Grid.Column="0" VerticalAlignment="Top" Margin="-4,0,0,0" HorizontalContentAlignment="Left"
                />
            <TextBlock 
                Text="{Binding Date, StringFormat=d}" 
                FontSize="{StaticResource PhoneFontSizeNormal}" 
                Grid.Column="1" Grid.ColumnSpan="1" 
                VerticalAlignment="Top" Margin="0, 4, 0, 0"/>
            <TextBlock 
                Text="{Binding ExpenseCategory}" 
                FontSize="{StaticResource PhoneFontSizeNormal}" 
                Grid.Column="2" Grid.ColumnSpan="1"
                VerticalAlignment="Top" Margin="0, 4, 0, 0"/>
            <TextBlock 
                Text="{Binding Amount,StringFormat=\{0:N2\}}"                    
                FontSize="{StaticResource PhoneFontSizeNormal}"
                Grid.Column="3" Grid.ColumnSpan="1"
                VerticalAlignment="Top" Margin="0, 4, 0, 0"/>
            <TextBlock 
                Text="{Binding PaymentCategory}" 
                FontSize="{StaticResource PhoneFontSizeNormal}" 
                Grid.Column="4" Grid.ColumnSpan="1" 
                VerticalAlignment="Top"  Margin="0, 4, 0, 0"/>
        </Grid>
    </DataTemplate>

我已经尝试显式设置行高和列，但只有使用像“80”这样的特别大的值，我才能显示复选框（虽然浪费了很多屏幕空间），如下所示：

在此处输入图像描述

将复选框的宽度和高度显式设置为更小（如 20x20）也会导致复选框根本不显示。显然，我一定遗漏了一些关于 XAML 的基本知识，但我想不通！

4

1 回答 1

0

显然，这是设置“正确”边距值的问题。我最终将我的<Grid></Grid>代码直接粘贴在页面上并可视化地编辑网格以正确对齐控件。这是生成的 XAML 代码：

<DataTemplate x:Key="ExpensesEditListTemplate">
    <Grid HorizontalAlignment="Stretch" Width="420">
        <Grid.RowDefinitions>
            <RowDefinition Height="64" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="48" />
            <ColumnDefinition Width="90" />
            <ColumnDefinition Width="90" />
            <ColumnDefinition Width="90" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <CheckBox 
            IsChecked="{Binding Ischecked}" 
            Grid.Column="0" VerticalAlignment="Top" Margin="-8,-18,0,0" HorizontalContentAlignment="Left"
            Checked="CheckBox_Checked" Unchecked="CheckBox_Checked"
            />
        <TextBlock 
            Text="{Binding Date, StringFormat=d}" 
            FontSize="{StaticResource PhoneFontSizeNormal}" 
            Grid.Column="1" Grid.ColumnSpan="1" 
            VerticalAlignment="Top" Margin="0, 4, 0, 0"/>
        <TextBlock 
            Text="{Binding ExpenseCategory}" 
            FontSize="{StaticResource PhoneFontSizeNormal}" 
            Grid.Column="2" Grid.ColumnSpan="1"
            VerticalAlignment="Top" Margin="0, 4, 0, 0"/>
        <TextBlock 
            Text="{Binding Amount,StringFormat=\{0:N2\}}"                    
            FontSize="{StaticResource PhoneFontSizeNormal}"
            Grid.Column="3" Grid.ColumnSpan="1"
            VerticalAlignment="Top" Margin="0, 4, 0, 0"/>
        <TextBlock 
            Text="{Binding PaymentCategory}" 
            FontSize="{StaticResource PhoneFontSizeNormal}" 
            Grid.Column="4" Grid.ColumnSpan="1" 
            VerticalAlignment="Top"  Margin="0, 4, 0, 0"/>
    </Grid>
</DataTemplate>

然而，这对我来说仍然是一个谜——如何Margin="-8,-18,0,0"出现对齐复选框的正确值？为什么忽略显式设置的复选框大小？我想这是一些我不知道的默认值。

于 2013-06-12T20:58:53.143 回答