带有数据模板的 xaml UI 设计 - 按钮未显示

Question

我正在尝试设计一个 windows phone 8 应用程序，我需要一个包含信息的列表框。我正在使用数据模板来显示我的数据。数据模板如下所示：

<DataTemplate x:Key="NewPortfolioHoldingTemplate">
        <Grid Width="Auto">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="25*"/>
                <ColumnDefinition Width="35*"/>
                <ColumnDefinition Width="30*"/>
                <ColumnDefinition Width="5*"/>
                <ColumnDefinition Width="5*"/>
            </Grid.ColumnDefinitions>
            <toolkit:PhoneTextBox x:Name="Ticker" Grid.Column="0" HorizontalAlignment="Left" Height="80" TextWrapping="Wrap" VerticalAlignment="Top" Width="Auto" Text="{Binding Ticker}" Hint="Ticker" FontSize="32" />
            <toolkit:PhoneTextBox x:Name="Shares" Grid.Column="1" HorizontalAlignment="Left" Height="80" TextWrapping="Wrap" Text="{Binding Share}" VerticalAlignment="Top" Width="Auto" Hint="Shares" />
            <toolkit:PhoneTextBox x:Name="Price"  Grid.Column="2" HorizontalAlignment="Left" Height="80" TextWrapping="Wrap" VerticalAlignment="Top" Width="Auto" Hint="Price"/>
            <Button x:Name="Add" Content="+" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="3" FontSize="32" />
            <Button x:Name="Remove" Content="-" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="4" FontSize="32" />
        </Grid>
    </DataTemplate>

我正在像这样使用这个数据模板：

 <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock x:Name="NewPortNameBlock" Grid.Row="0" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" Margin="19,19,0,0" FontSize="24"/>
        <TextBox x:Name="NewPortNameBox" Grid.Row="0" HorizontalAlignment="Left" TextWrapping="Wrap" Text="PortName" VerticalAlignment="Top" Margin="87,0,0,0" FontSize="24" Width="369"/>
        <TextBlock x:Name="NewPortCashBlock" Grid.Row="1" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Cash" VerticalAlignment="Top" Margin="19,19,0,0" FontSize="24"/>
        <TextBox x:Name="NewPortCashBox" Grid.Row="1" HorizontalAlignment="Left" TextWrapping="Wrap" Text="CashAmt" VerticalAlignment="Top" Margin="87,0,0,0" FontSize="24" Width="369"/>
        <TextBlock x:Name="NewPortHoldingBlock" Grid.Row="2" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Holding" VerticalAlignment="Top" Margin="19,10,0,0" FontSize="24"/>
        <ListBox x:Name="NewPortHoldingList" Grid.Row="2" Margin="10,47,10,10" ItemsSource="{Binding Holdings}" ItemTemplate="{StaticResource NewPortfolioHoldingTemplate}">

        </ListBox>
    </Grid>

注意 ListBox 的模板。当我在模拟器（WVGA 512MB）中运行它时，由于某种原因，我看不到任何按钮。我做错了什么？当我在 Blend 中编辑模板时，它看起来很好。

Answer 1

这是 Button 控件样式的副作用。 Button 的 ControlTemplate 中有一个带有边框控件的 Grid。 Border 的 Margin 设置为“PhoneTouchTargetOverhang”资源的值。这样做是为了确保有足够的空间来触摸按钮（用手指触摸比用鼠标指针触摸更难）。要删除此边距，请执行以下操作

1. 右键单击列表框（在设计视图中）并选择编辑附加模板 -> 编辑项目模板 -> 编辑当前。现在您将编辑您的 DataTemplate。
2. 现在右键单击按钮，然后选择编辑模板 -> 编辑副本...这将为按钮创建一个样式资源。
3. 在样式中，从 Border 控件（它应该位于 VisualStateManager 元素下）中删除 Margin 属性（具有上述值）。

Button 样式的边框应如下所示

<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
        Background="{TemplateBinding Background}" CornerRadius="0" >
    <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" 
                    Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" 
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" 
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>