Question

我正在寻找一种创建汇总类型控件的方法，但是我很难找到什么开始。

我需要在屏幕上有两个区域，下部区域有一些按钮。单击该按钮时，此区域将向上扩展，但仅部分覆盖上部区域。

我已经看过使用Expander控件，但被覆盖的“扩展”区域只能是100％，因为我需要上面板的一部分仍然可见。再次单击该按钮应返回上一个拆分视图状态。

我想过看PopUp，但我确信必须有更好的方法。

有什么想法吗？

由于

克里斯

Answer 1

我不确定我是否完全理解你想要的东西，但似乎是这样的。

<Window x:Class="WpfApplication7.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Expander Grid.Column="0" 
                    IsExpanded="False" 
                    ExpandDirection="Right">
                <ListBox 
                SelectionMode="Single" 
                Width="170" 
                VerticalContentAlignment="Top" 
                HorizontalAlignment="Left" 
                BorderBrush="Black"/>
            </Expander>

            <TextBox 
            Grid.Column="1" 
            HorizontalScrollBarVisibility="Auto" 
            VerticalScrollBarVisibility="Auto" 
            IsReadOnly="True" 
            BorderThickness="1" 
            Margin="0,3,3,3"/>
        </Grid>
    </Grid>
</Window>

当您展开菜单时，这基本上会减小TextBox的大小。关闭菜单时，它将被最小化，TextBox将再次为完整大小。

这是我用来添加一个向下扩展到TextBox的“搜索框”的另一个例子。

<TextBox Text="Stuff" Background="Orange"></TextBox>
<Expander
                Name="searchExpander"
                IsExpanded="False"
                Grid.Column="1"
                ExpandDirection="Down"
                Margin="0,-5,20,0"
                Height="Auto" 
                Width="250" 
                VerticalAlignment="Top" 
                HorizontalAlignment="Right">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.70*" />
            <ColumnDefinition Width="0.30*" />
        </Grid.ColumnDefinitions>

        <TextBox
                                Grid.Column="0"
                                Name="searchTxt"
                                Margin="5" 
                                Height="Auto" 
                                HorizontalAlignment="Stretch" 
                                VerticalAlignment="Center">
        </TextBox>
        <Button 
                            x:Name="SerachButton"
                            Margin="3,6,3,6"
                            Grid.Column="1" 
                            Height="Auto" 
                            Content="Search" 
                            VerticalAlignment="Stretch" />
    </Grid>
</Expander>

Answer 2

这会增加一个文本框。一旦扩展，就会让你按下按钮来减少TB。

<Window.Resources>
    <Storyboard x:Name="sbGrow" x:Key="sbGrow">
        <DoubleAnimation Storyboard.TargetName="tbGrow"
                                    Storyboard.TargetProperty="Height"
                                    From="100" To="200" />
    </Storyboard>
</Window.Resources>

<Grid Name="test">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />       
    </Grid.RowDefinitions>
    <Button Grid.Row="1" Click="btnGrowTB" Content="Grow TB"/>
    <TextBox Grid.Row="2" x:Name="tbGrow" BorderBrush="AliceBlue" BorderThickness="4" VerticalAlignment="Bottom" Height="100"/>
</Grid>

private void btnGrowTB(object sender, RoutedEventArgs e)
{
    Storyboard growtbStoryboard = (Storyboard)(FindResource("sbGrow"));
    growtbStoryboard.Begin();
}

扩展器行为需要部分扩展到顶级内容

2 个答案: