如何在 WPF 中设置小扩展头并加宽内容？

Question

我正在创建自定义虚拟键盘。目前，对于所有标点符号，我将其设置在另一个网格上。 Expander 内容似乎可以容纳标点符号视图。但是目前如果想让expander content能够看到里面的内容，需要设置content的大小。

我如何才能拥有按钮尺寸扩展器，并且在单击时，内容会扩展到更宽的尺寸？

如何使扩展器的大小如下图（黄色矩形），但是当单击扩展器时，内容会像 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>

Answer 1

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

当您使用 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>

如何在 WPF 中设置小扩展头并加宽内容？

How to set small expander header and widen the content in WPF?

c#

wpf

xaml

expander