0

情報を含むリストボックスが必要な 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 で編集している場合、テンプレートは問題なく表示されます。

4

1 に答える 1

0

これは、Button コントロールのスタイルの副作用です。Button の ControlTemplate 内には、Border コントロールを持つ Grid があります。Border には、「PhoneTouchTargetOverhang」リソースの値に設定された Margin があります。これは、ボタンをタッチするのに十分なスペースを確保するためです (マウス ポインターよりも指でタッチする方が難しい)。このマージンを削除するには、次の手順を実行します

  1. ListBox を (デザイン ビューで) 右クリックし、[追加テンプレートの編集] -> [アイテム テンプレートの編集] -> [現在の編集] を選択します。ここで、DataTemplate を編集します。
  2. ボタンを右クリックし、[テンプレートの編集] -> [コピーの編集] を選択します。これにより、ボタンのスタイル リソースが作成されます。
  3. スタイルで、Margin プロパティ (上記の値を持つ) を Border コントロール (VisualStateManager 要素の下に配置する必要があります) から削除します。

Button スタイルの Border は次のようになります。

<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>
于 2013-09-20T21:28:34.043 に答える