如何在WPF中设置小扩展头和扩展内容？

Posted 2021-03-26

我正在创建一个自定义虚拟键盘​​。目前，对于所有标点符号，我将其设置在另一个网格上。扩展器内容似乎可以保持标点符号视图。但是，如果我希望扩展器内容能够查看其中的内容，则目前需要设置内容的大小。

如何使用按钮大小扩展器，点击时，内容将扩展到更大的尺寸？

如何制作扩展器的大小如下图（黄色矩形），但点击扩展器时，内容将像GIF一样展开？

<Button HorizontalAlignment="Left" Height="52.25" Margin="0,238.5,0,0" VerticalAlignment="Top" Width="168.187" Background="#FF3C3C3C" FontFamily="Arial" FontSize="18" BorderBrush="#FF6E6E6E">
    <Expander Header="?!#" ExpandDirection="Up" Background="{x:Null}" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Top">
        <!-- How add content grid which can be expander at full while maintaining the expander header to small size? -->
    </Expander>
</Button>

答案

我建议你把扩展键盘的Buttons放在另一个Panel中，用Visibility控制Panel的ToggleButton。

当你使用Expander（就像你做的那样）来保存扩展键盘时，这可以很容易地完成，类似于：

<Grid Background="Gray" Height="300">
    <!-- Basic Keyboard Buttons can be placed here -->
    <Button HorizontalAlignment="Left" Margin="0,0,0,30" VerticalAlignment="Top" Content="Put some Buttons from the BASIC Keyboard here"/>
    <!-- Button to bring the extanded Keyboard into view -->
    <ToggleButton x:Name="ExtendedKeyboardActive" HorizontalAlignment="Left" VerticalAlignment="Center" Content="?!#" Width="50"/>
    <!-- Extended Keyboard (Note: I would rather use a simple <Grid/> instead of an <Expander/> but it is up to you)-->
    <Expander VerticalAlignment="Bottom" ExpandDirection="Up" IsExpanded="{Binding IsChecked, ElementName=ExtendedKeyboardActive}" Background="LightGray">
        <Grid Height="300">
            <!-- Content of the extaned Keyboard -->
            <Button HorizontalAlignment="Left" Margin="0,0,0,30" VerticalAlignment="Top" Content="Put some Buttons from the EXTENDED Keyboard here"/>
            <!-- Button ti hide the extended Keyboard (optional if it the 'ExtendedKeyboardActive' is not covered over by the extended Keyboard Grid) -->
            <ToggleButton IsChecked="{Binding IsChecked, ElementName=ExtendedKeyboardActive}" Width="50" HorizontalAlignment="Left" VerticalAlignment="Center" Content="ABC" />
        </Grid>
    </Expander>
</Grid>

或者你可以使用PopUp，因为Expander有这个Arrow-Circle-Thing总是显示而不是真正需要（感谢@Bradley Uffner）。

<Grid Background="Gray">
    <!-- Basic Keyboard Buttons can be placed here -->
    <Button HorizontalAlignment="Left" Margin="0,0,0,30" VerticalAlignment="Bottom" Content="Put some Buttons from the BASIC Keyboard here"/>
    <!-- Button to bring the extanded Keyboard into view -->
    <ToggleButton x:Name="ExtendedKeyboardActive" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="?!#" Width="50"/>
    <!-- Extended Keyboard -->
    <Popup IsOpen="{Binding IsChecked, ElementName=ExtendedKeyboardActive}" Placement="Center" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Grid}}}" Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Grid}}}">
        <Grid Background="LightGray">
            <!-- Content of the extended Keyboard -->
            <Button HorizontalAlignment="Left" Margin="0,0,0,30" VerticalAlignment="Bottom" Content="Put some Buttons from the extended Keyboard here"/>
            <!-- Button to go back to the basic Keyboard -->
            <ToggleButton IsChecked="{Binding IsChecked, ElementName=ExtendedKeyboardActive}" Width="50" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="ABC" />
        </Grid>
    </Popup>
</Grid>