Как установить маленький заголовок экспандера и расширить содержимое в WPF? - PullRequest
Новая
       40

Как установить маленький заголовок экспандера и расширить содержимое в WPF?

0 голосов
/ 11 марта 2019

Я создаю собственную виртуальную клавиатуру.В настоящее время, для всей пунктуации, я установил его на другой сетке.Содержимое экспандера, кажется, может содержать пунктуацию.Но в настоящее время необходимо установить размер содержимого, если я хочу, чтобы содержимое расширителя могло просматривать содержимое внутри.

Как сделать так, чтобы иметь возможность расширения размера кнопки и при нажатии содержимоебудет расширяться до более широкого размера?

OSK

Как сделать экспандер размером, как показано на рисунке ниже (желтый прямоугольник), но при нажатии на экспандер,содержимое будет расширяться как GIF?

enter image description here

<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>

1 Ответ

2 голосов
/ 11 марта 2019

Я предлагаю вам поместить Button расширенной клавиатуры в другую 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 имеет эту стрелку-круг-вещь, которая всегда отображается и не нужна (спасибо @ Брэдли Аффнер ). 

<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>
...