在我的主 XAML 中“包含”XAML 页面答案

【问题标题】："Including" XAML page in my main XAML在我的主 XAML 中“包含”XAML 页面
【发布时间】：2014-09-30 09:22:43
【问题描述】：

我有一个 TabItem，旁边有一个 DataGrid 和一个 Graph，这个 TabItem 基本上必须复制到 26 个不同的 TabItem 上，但每个 TabItem 都有不同的 DataSource。我想知道是否有办法将此页面与 DataGrid 和 Graph 放在单独的 XAML 页面上，然后在每个不同的 TabItem 上引用它。

如果可能的话，是否也可以将变量传递到此 XAML 页面，因为每个 DataGrid 将具有不同的 DataBinding 源。

页面代码：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.65*" />
        <ColumnDefinition Width="0.35*" />
    </Grid.ColumnDefinitions>
    <TabControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="1" TabStripPlacement="Bottom">
        <TabItem Header="OPPERVLAKKEN" Controls:ControlsHelper.HeaderFontSize="14">
            <GroupBox Header="waterbalans grafiek" 
                      HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Canvas x:Name="OppervlakkenCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SizeChanged="GrafiekTekenen"/>
            </GroupBox>
        </TabItem>
        <TabItem Header="VOORZIENINGEN" Controls:ControlsHelper.HeaderFontSize="14">
            <GroupBox Header="waterbalans grafiek"
                      HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Canvas x:Name="VoorzieningenCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SizeChanged="GrafiekTekenen"/>
            </GroupBox>
        </TabItem>
    </TabControl>
    <TabControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" TabStripPlacement="Bottom">
        <TabItem Header="RESULTAAT" Controls:ControlsHelper.HeaderFontSize="14">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <GroupBox Header="waterbalans afvoerend oppervlak" Grid.Row="0" Grid.Column="0"
                          HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <DataGrid ItemsSource="{Binding Path=Input.ResultatenCollectie[0].Oppervlakken}" AutoGenerateColumns="False"
                              HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource ResultatenTabel}"
                              CanUserResizeColumns="False" CanUserResizeRows="False" CanUserReorderColumns="False" CanUserSortColumns="False"
                              FrozenColumnCount="2" Margin="0,0,0,0" IsReadOnly="True" ScrollViewer.HorizontalScrollBarVisibility="Visible">
                        <DataGrid.Columns>
                            <DataGridTextColumn Width="25" Header="#" Binding="{Binding Path=Resultaten[0].Int}" HeaderStyle="{StaticResource OmschrijvingHeader}" CellStyle="{StaticResource OmschrijvingCell}"/>
                            <DataGridTextColumn Width="*" Header="oppervlak" Binding="{Binding Path=Resultaten[1].String}" HeaderStyle="{StaticResource OmschrijvingHeader}" CellStyle="{StaticResource OmschrijvingCell}"/>
                            <DataGridTextColumn Width="100" Header="neerslag&#x0a;          (m³)" Binding="{Binding Path=Resultaten[2].Double, StringFormat={}{0:f2}}"/>
                            <DataGridTextColumn Width="100" Header="verdampt&#x0a;           (m&#xb3;)" Binding="{Binding Path=Resultaten[3].Double, StringFormat={}{0:f2}}" HeaderStyle="{StaticResource VerdamptHeader}"/>
                            <DataGridTextColumn Width="125" Header="geinfiltreerd&#x0a;                  (m&#xb3;)" Binding="{Binding Path=Resultaten[4].Double, StringFormat={}{0:f2}}" HeaderStyle="{StaticResource GeinfiltreerdHeader}"/>
                            <DataGridTextColumn Width="100" Header="geborgen&#x0a;           (m&#xb3;)" Binding="{Binding Path=Resultaten[5].Double, StringFormat={}{0:f2}}" HeaderStyle="{StaticResource GeborgenHeader}"/>
                            <DataGridTextColumn Width="125" Header="afgestroomd&#x0a;                   (m&#xb3;)" Binding="{Binding Path=Resultaten[6].Double, StringFormat={}{0:f2}}" HeaderStyle="{StaticResource AfgestroomdHeader}"/>
                        </DataGrid.Columns>
                    </DataGrid>
                </GroupBox>
                <GroupBox Header="waterbalans voorziening" Grid.Row="1" Grid.Column="0" 
                          HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <DataGrid ItemsSource="{Binding Path=Input.ResultatenCollectie[0].Voorziening}" AutoGenerateColumns="False"
                              HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource ResultatenTabel}"
                              CanUserResizeColumns="False" CanUserResizeRows="False" CanUserReorderColumns="False" CanUserSortColumns="False"
                              FrozenColumnCount="2" Margin="0,0,0,0" IsReadOnly="True" ScrollViewer.HorizontalScrollBarVisibility="Visible">
                        <DataGrid.Columns>
                            <DataGridTextColumn Width="25" Header="#" Binding="{Binding Path=Resultaten[0].Int}" HeaderStyle="{StaticResource OmschrijvingHeader}" CellStyle="{StaticResource OmschrijvingCell}"/>
                            <DataGridTextColumn Width="*" Header="element" Binding="{Binding Path=Resultaten[1].String}" HeaderStyle="{StaticResource OmschrijvingHeader}" CellStyle="{StaticResource OmschrijvingCell}"/>
                            <DataGridTextColumn Width="100" Header="inloop&#x0a;      (m&#xb3;)" Binding="{Binding Path=Resultaten[2].Double, StringFormat={}{0:f2}}"/>
                            <DataGridTextColumn Width="100" Header="geborgen&#x0a;           (m&#xb3;)" Binding="{Binding Path=Resultaten[3].Double, StringFormat={}{0:f2}}" HeaderStyle="{StaticResource GeborgenHeader}"/>
                            <DataGridTextColumn Width="100" Header="geledigd&#x0a;         (m&#xb3;)" Binding="{Binding Path=Resultaten[4].Double, StringFormat={}{0:f2}}" HeaderStyle="{StaticResource GeinfiltreerdHeader}"/>
                            <DataGridTextColumn Width="125" Header="overgelopen&#x0a;                 (m&#xb3;)" Binding="{Binding Path=Resultaten[5].Double, StringFormat={}{0:f2}}" HeaderStyle="{StaticResource AfgestroomdHeader}"/>
                            <DataGridTextColumn Width="125" Header="overloop&#x0a;frequentie" Binding="{Binding Path=Resultaten[6].Double, StringFormat={}{0:f0}}"/>
                        </DataGrid.Columns>
                    </DataGrid>
                </GroupBox>
            </Grid>
        </TabItem>
        <TabItem Header="GEGEVENS" Controls:ControlsHelper.HeaderFontSize="14">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <GroupBox Header="gegevens afvoerend oppervlak" Grid.Row="0" Grid.Column="0"
                          HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <DataGrid ItemsSource="{Binding Path=Input.OppervlakGegevens}" AutoGenerateColumns="False"
                              HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource ResultatenTabel}"
                              CanUserResizeColumns="False" CanUserResizeRows="False" CanUserReorderColumns="False" CanUserSortColumns="False"
                              FrozenColumnCount="1" Margin="0,0,0,0" IsReadOnly="True">
                        <DataGrid.Columns>
                            <DataGridTextColumn Width="*" Header="omschrijving" Binding="{Binding Path=Gegevens[0].String}" HeaderStyle="{StaticResource OmschrijvingHeader}" CellStyle="{StaticResource OmschrijvingCell}"/>
                            <DataGridTextColumn Width="*" Header="grootte&#x0a;oppervlak (m&#xb2;)" Binding="{Binding Path=Gegevens[1].Double, StringFormat={}{0:f2}}"/>
                            <DataGridTextColumn Width="1.1*" Header="afstromings&#x0a;vertraging (min&#x207b;&#xb9;)" Binding="{Binding Path=Gegevens[2].Double, StringFormat={}{0:f2}}"/>
                            <DataGridTextColumn Width="*" Header="oppervlakte&#x0a;berging (mm)" Binding="{Binding Path=Gegevens[3].Double, StringFormat={}{0:f2}}"/>
                            <DataGridTextColumn Width="*" Header="verdampings&#x0a;factor (0-1)" Binding="{Binding Path=Gegevens[4].Double, StringFormat={}{0:f2}}"/>
                        </DataGrid.Columns>
                    </DataGrid>
                </GroupBox>
                <GroupBox Header="gegevens voorziening" Grid.Row="1" Grid.Column="0" 
                          HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <DataGrid ItemsSource="{Binding Path=Input.VoorzieningGegevens}" AutoGenerateColumns="False"
                              HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource ResultatenTabel}"
                              CanUserResizeColumns="False" CanUserResizeRows="False" CanUserReorderColumns="False" CanUserSortColumns="False"
                              FrozenColumnCount="1" Margin="0,0,0,0" IsReadOnly="True">
                        <DataGrid.Columns>
                            <DataGridTextColumn Width="*" Header="element" Binding="{Binding Path=Gegevens[0].String}" HeaderStyle="{StaticResource OmschrijvingHeader}" CellStyle="{StaticResource OmschrijvingCell}"/>
                            <DataGridTextColumn Width="*" Header="berging&#x0a;(mm)" Binding="{Binding Path=Gegevens[1].Double, StringFormat={}{0:f2}}"/>
                            <DataGridTextColumn Width="*" Header="ledigings&#x0a;capaciteit (mm/h)" Binding="{Binding Path=Gegevens[2].Double, StringFormat={}{0:f2}}"/>
                        </DataGrid.Columns>
                    </DataGrid>
                </GroupBox>
            </Grid>
        </TabItem>
    </TabControl>
</Grid>

每个页面上唯一不同的是：

ItemsSource="{Binding Path=Input.ResultatenCollectie[0].Oppervlakken}"

0 必须是 1，然后是 2，等等

【问题讨论】：

标签： c# wpf xaml

【解决方案1】：

我认为最好的解决方案是将 ItemsControl 与数据模板。在此 DataTemplate 中，您定义使用“您的”控件。 DataSource 的问题是，您需要有可能在每个控件上定义它。您在哪里尝试获取这些数据源？最好的解决方案是在“你的”控件中添加一个依赖属性并将其绑定在 DataTemplate 中。但是请：给我们看一些代码！

编辑：我完全误解了你的问题。这是另一个建议：创建一个新的 WPF 用户控件 (MyTabItem.xaml)

<UserControl x:Class="WpfApplication1.MyTabItem"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<Grid>
    <TabItem Header="RESULTAAT">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <GroupBox Header="waterbalans afvoerend oppervlak" Grid.Row="0" Grid.Column="0"
                      HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <DataGrid x:Name="MyDataGrid"  AutoGenerateColumns="False"
                          HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource ResultatenTabel}"
                          CanUserResizeColumns="False" CanUserResizeRows="False" CanUserReorderColumns="False" CanUserSortColumns="False"
                          FrozenColumnCount="2" Margin="0,0,0,0" IsReadOnly="True" ScrollViewer.HorizontalScrollBarVisibility="Visible">
                    <DataGrid.Columns>
                        <DataGridTextColumn Width="25" Header="#" Binding="{Binding Path=Resultaten[0].Int}" HeaderStyle="{StaticResource OmschrijvingHeader}" CellStyle="{StaticResource OmschrijvingCell}"/>
                        <DataGridTextColumn Width="*" Header="oppervlak" Binding="{Binding Path=Resultaten[1].String}" HeaderStyle="{StaticResource OmschrijvingHeader}" CellStyle="{StaticResource OmschrijvingCell}"/>
                        <DataGridTextColumn Width="100" Header="neerslag&#x0a;          (m³)" Binding="{Binding Path=Resultaten[2].Double, StringFormat={}{0:f2}}"/>
                        <DataGridTextColumn Width="100" Header="verdampt&#x0a;           (m&#xb3;)" Binding="{Binding Path=Resultaten[3].Double, StringFormat={}{0:f2}}" HeaderStyle="{StaticResource VerdamptHeader}"/>
                        <DataGridTextColumn Width="125" Header="geinfiltreerd&#x0a;                  (m&#xb3;)" Binding="{Binding Path=Resultaten[4].Double, StringFormat={}{0:f2}}" HeaderStyle="{StaticResource GeinfiltreerdHeader}"/>
                        <DataGridTextColumn Width="100" Header="geborgen&#x0a;           (m&#xb3;)" Binding="{Binding Path=Resultaten[5].Double, StringFormat={}{0:f2}}" HeaderStyle="{StaticResource GeborgenHeader}"/>
                        <DataGridTextColumn Width="125" Header="afgestroomd&#x0a;                   (m&#xb3;)" Binding="{Binding Path=Resultaten[6].Double, StringFormat={}{0:f2}}" HeaderStyle="{StaticResource AfgestroomdHeader}"/>
                    </DataGrid.Columns>
                </DataGrid>
            </GroupBox>
            <GroupBox Header="waterbalans voorziening" Grid.Row="1" Grid.Column="0" 
                      HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <DataGrid ItemsSource="{Binding Path=Input.ResultatenCollectie[0].Voorziening}" AutoGenerateColumns="False"
                          HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource ResultatenTabel}"
                          CanUserResizeColumns="False" CanUserResizeRows="False" CanUserReorderColumns="False" CanUserSortColumns="False"
                          FrozenColumnCount="2" Margin="0,0,0,0" IsReadOnly="True" ScrollViewer.HorizontalScrollBarVisibility="Visible">
                    <DataGrid.Columns>
                        <DataGridTextColumn Width="25" Header="#" Binding="{Binding Path=Resultaten[0].Int}" HeaderStyle="{StaticResource OmschrijvingHeader}" CellStyle="{StaticResource OmschrijvingCell}"/>
                        <DataGridTextColumn Width="*" Header="element" Binding="{Binding Path=Resultaten[1].String}" HeaderStyle="{StaticResource OmschrijvingHeader}" CellStyle="{StaticResource OmschrijvingCell}"/>
                        <DataGridTextColumn Width="100" Header="inloop&#x0a;      (m&#xb3;)" Binding="{Binding Path=Resultaten[2].Double, StringFormat={}{0:f2}}"/>
                        <DataGridTextColumn Width="100" Header="geborgen&#x0a;           (m&#xb3;)" Binding="{Binding Path=Resultaten[3].Double, StringFormat={}{0:f2}}" HeaderStyle="{StaticResource GeborgenHeader}"/>
                        <DataGridTextColumn Width="100" Header="geledigd&#x0a;         (m&#xb3;)" Binding="{Binding Path=Resultaten[4].Double, StringFormat={}{0:f2}}" HeaderStyle="{StaticResource GeinfiltreerdHeader}"/>
                        <DataGridTextColumn Width="125" Header="overgelopen&#x0a;                 (m&#xb3;)" Binding="{Binding Path=Resultaten[5].Double, StringFormat={}{0:f2}}" HeaderStyle="{StaticResource AfgestroomdHeader}"/>
                        <DataGridTextColumn Width="125" Header="overloop&#x0a;frequentie" Binding="{Binding Path=Resultaten[6].Double, StringFormat={}{0:f0}}"/>
                    </DataGrid.Columns>
                </DataGrid>
            </GroupBox>
        </Grid>
    </TabItem>
</Grid>

使用 MyTabItem.xaml.cs

    /// <summary>
/// Interaction logic for MyTabItem.xaml
/// </summary>
public partial class MyTabItem : UserControl
{
    public static readonly DependencyProperty MyDatasourceProperty = DependencyProperty.Register("MyDatasource", typeof(IEnumerable), typeof(MyTabItem), new PropertyMetadata(default(IEnumerable), MyDataSourceChangedCallback));

    private static void MyDataSourceChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var myobj = d as MyTabItem;
        if (myobj == null) return;
        myobj.MyDataSourceChanged(d, e);
    }

    private void MyDataSourceChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
    {
        MyDataGrid.ItemsSource = dependencyPropertyChangedEventArgs.NewValue as IEnumerable;
    }

    public MyTabItem()
    {
        InitializeComponent();
    }

    public IEnumerable MyDatasource
    {
        get { return (IEnumerable)GetValue(MyDatasourceProperty); }
        set { SetValue(MyDatasourceProperty, value); }
    }
}

然后你可以像这样使用它：

        <TabControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" TabStripPlacement="Bottom">
        <wpfApplication1:MyTabItem MyDatasource="{Binding Path=Input.ResultatenCollectie[0].Oppervlakken}"       />
        <wpfApplication1:MyTabItem MyDatasource="{Binding Path=Input.ResultatenCollectie[1].Oppervlakken}"       />
        <wpfApplication1:MyTabItem MyDatasource="{Binding Path=Input.ResultatenCollectie[2].Oppervlakken}"       />
    </TabControl>

【讨论】：

几乎是我要找的东西，而且我在搜索时也已经找到了一些 UserControl 指令。我现在得到的主要错误是无法解决所有 HeaderStyle 等问题，并且 SizeChanged="GrafiekTekenen" 也会引发错误
我通过简单地将资源复制到 UserControl 来修复样式，但是我的 GrafiekTekenen 事件呢？
这次活动怎么样？它在我正在触摸的 TabControl 上方的 TabControl 中......
啊，我明白了，我需要 TabControl 也成为 UserControl 的一部分