Question

我正在尝试设计一个Windows Phone 8应用程序，我需要一个包含信息的列表框。我正在使用数据模板来显示我的数据。 datatemplate看起来像这样：

<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中是一个带边框控件的网格。边框的边距设置为“PhoneTouchTargetOverhang”资源的值。这样做是为了确保有足够的空间来触摸按钮（用手指触摸比使用鼠标指针更难）。要删除此保证金，请执行以下操作

右键单击ListBox（在设计视图中），然后选择编辑其他模板 - ＆gt;编辑项目模板 - ＆gt;编辑当前。现在您将编辑DataTemplate。
现在右键单击按钮，然后选择编辑模板 - ＆gt;编辑副本...这将为按钮创建样式资源。
在样式中，从Border控件中删除Margin属性（带有上面提到的值）（它应位于VisualStateManager元素下）。

按钮样式的边框应如下所示

<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>

带有datatemplate的xaml UI设计 - 按钮未显示

1 个答案: