1

と の 2 つのオブジェクトがあります。これは Bicycle を継承BicycleしBicycleFullSuspension、追加のプロパティ (文字列と小数点) を含みます。のオブジェクトが属するクラスに応じて、 DataTemplate または DataTemplate のDataTemplateSelectorいずれかを選択する機能を作成することができました。これらのテンプレートは両方とも、親テンプレートにバインドされています。LbxItemTemplateBicycleLbxItemTemplateFullSuspensionObservableCollectionListBoxItemTemplate

各オブジェクトに関する情報を ListBox に表示しようとしていますが、継承する各テンプレートは、親 DataTemplate のグリッドにいくつかのフィールドを追加する必要があります。私の問題は、継承されたテンプレートの 1 つから ListBoxItemTemplate のグリッドに WPF 要素を追加する方法がわからないことです。テンプレートのグリッドにキーを割り当てることができないため、追加の TextBlocks が親テンプレートと同じグリッドに配置されるように指定する方法がわかりません。(現在、追加の TextBlocks は親グリッドの上に積み重ねられています。)

<DataTemplate x:Key="ListBoxItemTemplate">
        <Border Name="LbxItemTemplate" BorderBrush="DarkRed" BorderThickness="2" Padding="5" Margin="5">
        <Grid>
            <Grid.RowDefinitions>
                ...
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                ...
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="1" Grid.Column="0" Text="Bike Year:" />
            <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding BikeYear}" />
            <TextBlock Grid.Row="2" Grid.Column="0" Text="Bike Color: "/>
            <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding BikeColor}"/>
            ...
            </Grid>
        </Border>
    </DataTemplate>
   <DataTemplate x:Key="LbxItemTemplateFullSuspension" DataType="{x:Type app:BicycleFullSuspension}">
        <Grid>
        <ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource ListBoxItemTemplate}" />
            <TextBlock Grid.Row="6" Grid.Column="0" Text="Shock Travel"/>
            <TextBlock Grid.Row="6" Grid.Column="1" Text="{Binding ShockTravel}"/>
        </Grid>
    </DataTemplate>

この点に到達するために、これらのリンクが役立つことがわかりました。

http://dariosantarelli.wordpress.com/2011/07/28/wpf-inheritance-and-datatemplates/ http://zamjad.wordpress.com/2009/12/31/applying-data-template-conditionally/

WPFでデータテンプレートの継承を使用する方法はありますか?

編集：

ベースを継承するテンプレートに Border を配置することを考えなかった理由はわかりませんが、継承するテンプレートの Border 内に StackPanel をネストすることによって (StackPanel には、ベース テンプレートのコンテンツを含む ContentPresenter と、Grid が含まれています)。追加情報があります)、すべてが非常にうまく並んでいます:

XAMeLiからの入力を使用した作業ソリューション:

<DataTemplate x:Key="ListBoxItemTemplate">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                ...
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150" SharedSizeGroup="LabelColumnGroup" />
                <ColumnDefinition Width="150" SharedSizeGroup="LabelColumnGroup" />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="1" Grid.Column="0" Text="Bike Year:" />
            <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding BikeYear}" />
            ...
        </Grid>
   </DataTemplate>
   <DataTemplate x:Key="LbxItemTemplateFullSuspension" DataType="{x:Type app:BicycleFullSuspension}" >
        <Border BorderBrush="DarkRed" BorderThickness="2" Padding="5" Margin="5" Grid.IsSharedSizeScope="True" Width="500">
            <StackPanel>
            <ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource ListBoxItemTemplate}" />
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    ...
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="LabelColumnGroup" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="LabelColumnGroup" />
                </Grid.ColumnDefinitions>
                ...
                <TextBlock Grid.Row="7" Grid.Column="0" Text="Shock Type: "/>
                <TextBlock Grid.Row="7" Grid.Column="1" Text="{Binding ShockType}"/>
                ...
            </Grid>
            </StackPanel>
        </Border>
    </DataTemplate>
4

1 に答える 1

1

UIElemets をデータ テンプレートに追加することはできませんが、より大きなテンプレートをレイアウトして、ベース テンプレートにテキストを追加したように見せることができます。

基本的に、あなたは正しい道を進んでいます。大きなテンプレートのレイアウトだけが壊れています。（行と列の構造を省略したのは残念です）

これを試して：

<DataTemplate x:Key="ListBoxItemTemplate">
    <Border Name="LbxItemTemplate" BorderBrush="DarkRed" BorderThickness="2" Padding="5" Margin="5">
    <Grid>
        <Grid.RowDefinitions>
            ...
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"
                              SharedSizeGroup="LabelGroupColumn"/>
            ...
        </Grid.ColumnDefinitions>
      ....
    </Border>
</DataTemplate>

<DataTemplate x:Key="LbxItemTemplateFullSuspension">
    <Grid Grid.IsSharedSizeScope="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/><!--This will hold the default template-->
            <!--From here define the same structure as in the default template, if you have rows for margins and such-->
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"
                              SharedSizeGroup="LabelGroupColumn"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource ListBoxItemTemplate}" />
        <TextBlock Grid.Row="1" Grid.Column="0" Text="Shock Travel"/>
        <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding ShockTravel}"/>
    </Grid>
</DataTemplate>

あなたのグリッドには Label-Value 構造があり、すべての値を同じ垂直線から開始したいようです (これは UX の観点から非常に良いことです)。SharedSizeGroup列定義とGrid.IsSharedSizeScope="True"相互の親のセッターに注意してください。これにより、ラベル列の幅がグリッド間で同期されます。

于 2012-06-08T14:20:20.540 に答える