WPF UI 设计问题 - 控件可见性答案

【问题标题】：WPF UI Design Issue - Control VisibilityWPF UI 设计问题 - 控件可见性
【发布时间】：2012-05-11 15:50:55
【问题描述】：

我正在使用 D3 图表控件创建具有额外功能的图表用户控件。以下是我的 UI 问题。

顶部有一个工具栏托盘，中间有一个图表，底部有一个折叠的数据网格。用户控件的右侧是一个docksplitter。这个 docksplitter 覆盖了用户控件的长度，并提供了一个偶尔显示面板的区域。

当我在 WPF 窗口中加载用户控件并将其设置为拉伸时，即使数据网格在代码中设置为可见（即单击按钮），底部折叠的数据网格也不可见。图表填充到底部。我该如何解决这个问题？

以下是相同的 XAML：

<UserControl>
<DockPanel>
    <Grid Name="LnChartEditor" DockPanel.Dock="Right"/>
    <osc:DockPanelSplitter x:Name="DocSplitter" DockPanel.Dock="Right" Style="{StaticResource VerticalBevelGrip}" Width="7" />        
        <ToolBarTray DockPanel.Dock="Top" Height="32" Width="Auto" HorizontalAlignment="Stretch" Name="toolBarTrayTop" VerticalAlignment="Top" >
            <ToolBar x:Name="ToolBarOben" DockPanel.Dock="Top" Height="30">
                <Button Width="30" Height="30">
                </Button>
                <Label x:Name="lblCaption" Width="Auto">                    
                </Label>
                <Popup x:Name="Popup1"  PlacementTarget="{Binding ElementName=ClearChart}" PopupAnimation="Slide" AllowsTransparency="true">
                </Popup>
            </ToolBar>
        </ToolBarTray>
        <Grid Name="grdPlotter" Background="WhiteSmoke" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <d3:ChartPlotter Name="LineChart" BorderThickness="10" Opacity="0.8" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <d3:AxisNavigation Placement="Right"/>
                <d3:ChartPlotter.ContextMenu>
                    <ContextMenu Name="D3ContextMenu">
                    </ContextMenu>
                </d3:ChartPlotter.ContextMenu>
            </d3:ChartPlotter>            
        </Grid>
    <DataGrid DockPanel.Dock="Bottom" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="gridMiniReport" Visibility="Collapsed"          CanUserAddRows="False" CanUserDeleteRows="False" CanUserReorderColumns="False" CanUserResizeColumns="False" CanUserResizeRows="False"                     CanUserSortColumns="False" HeadersVisibility="Column" GridLinesVisibility="None">
    </DataGrid>        
</DockPanel>

【问题讨论】：

标签： wpf user-interface controls visibility

【解决方案1】：

尝试改变声明的顺序，因为最后一个孩子填补了剩余的空间：

<DockPanel>
    <Grid Name="LnChartEditor" DockPanel.Dock="Right" />
    <osc:DockPanelSplitter x:Name="DocSplitter" DockPanel.Dock="Right" />        
    <ToolBarTray Name="toolBarTrayTop" DockPanel.Dock="Top" />
    <DataGrid x:Name="gridMiniReport" DockPanel.Dock="Bottom" />
    <Grid Name="grdPlotter" />
</DockPanel>

【讨论】：