エキスパンダーの動作が部分的にトップコンテンツに拡張する必要があります

Question

ロールアップタイプコントロールを作成する方法を探していますが、何を開始するのが難しいですか。

私は画面上に2つの領域が必要ですが、下部領域にはある種のボタンがあります。ボタンがクリックされると、この領域は上方に拡張するが、上部領域を部分的にしか覆わない。

私は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(); 
}