2016-11-01 9 views
1

C#、XAML、およびWPFを使用して、多くのデスクトップ電子メールのメッセージコンテンツ用のペインと同様に、メールクライアント。私はそれを完全に隠すことができるようにしたい。そのコンテンツとウィンドウのメインコンテンツとの間でスプリッタをドラッグすることでサイズを変更する必要があります。可能な限り宣言的に実装されたXAMLのサイズ変更可能な隠ぺいウィンドウ

非常に宣言的に実装することができましたが、コードビハインドがサポートされている操作に焦点を当て、使用されるUIコンポーネントの状態を直接操作しない宣言的実装の明快さを犠牲にすることなく修正できないバグがあります。

  • レイアウト全体は3行目のグリッドで、中央の行にはGridSplitterが含まれています。
  • PaneVisibleという名前の依存関係プロパティは、ペイン内のGridSplitterおよびContentControlの見た目に双方向で結びついています。
  • PaneVisible == falseの場合、HeightAutoに設定されているため、中央の行が自動的に折りたたまれます。最下行のHeightは、DataTriggerを介して0に設定されています。

ちょうどPaneVisibleをトグルすると、希望どおりに動作します。 GridSplitterをドラッグした後、最後の行は決して崩壊することはありません、これは望ましくありません。 RowDefinition.Heightがローカル値を取得し、スタイルで指定された値(DataTriggerを含む)が使用されなくなった(オーバーライドされている)ことがわかりました。

私は別の依存関係プロパティPaneHeightを導入することについて考えたがPaneVisible == falseRowDefinition.Heightが0であるとPaneHeightは元の値を保持したときになるように、私はバインディングを設定できませんでした。その価値を絶対的に唯一の選択肢に設定しているのか、それとも私の問題を解決するための宣言的な方法がありますか?

全体的なデザインに関する提案も歓迎します。 UIプログラミングの経験はほとんどありません。


マークアップ:Application.Resources

<Window x:Class="WpfTestingApplication.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:WpfTestingApplication" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition MinHeight="20" Height="*" /> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition> 
     <RowDefinition.Style> 
      <Style TargetType="RowDefinition"> 
      <Setter Property="Height" Value="100" /> 
      <Style.Triggers> 
       <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=local:MainWindow}, Path=PaneVisible}" Value="false"> 
       <Setter Property="Height" Value="0" /> 
       </DataTrigger> 
      </Style.Triggers> 
      </Style> 
     </RowDefinition.Style> 
     </RowDefinition> 
    </Grid.RowDefinitions> 
    <ToggleButton Grid.Column="0" Click="TogglePane_Click">Toggle pane</ToggleButton> 
    <GridSplitter Grid.Row="1" Height="9" HorizontalAlignment="Stretch" Visibility="{Binding RelativeSource={RelativeSource AncestorType=local:MainWindow}, Path=PaneVisible, Converter={StaticResource BoolToVis}}" /> 
    <ContentControl Grid.Row="2" Name="Pane" Visibility="{Binding RelativeSource={RelativeSource AncestorType=local:MainWindow}, Path=PaneVisible, Converter={StaticResource BoolToVis}}"> 
     <TextBlock>Yadayada</TextBlock> 
    </ContentControl> 
    </Grid> 
</Window> 

、私は<BooleanToVisibilityConverter x:Key="BoolToVis" />を追加しました。

コードビハインド:

using System; 
using System.Windows; 

namespace WpfTestingApplication 
{ 
    public partial class MainWindow : Window 
    { 
    public static readonly DependencyProperty PaneVisibleProperty = 
     DependencyProperty.Register("PaneVisible", typeof(bool), typeof(MainWindow), new PropertyMetadata(false)); 

    public bool PaneVisible 
    { 
     get { return (bool)GetValue(PaneVisibleProperty); } 
     set { SetValue(PaneVisibleProperty, value); } 
    } 

    public MainWindow() 
    { 
     InitializeComponent(); 
    } 

    private void TogglePane_Click(object sender, RoutedEventArgs e) 
    { 
     PaneVisible = !PaneVisible; 
    } 
    } 
} 

答えて

0

私はあなたが既に知っているとして、あなたはとにかく何とか高さをリセットする必要がある、と思います。道があっても、読むのは簡単ではないでしょう。

私があなただったら、「SplitPanel」のようにその目的でUserControlを定義します。このSplitPanelには、上部要素、下部要素、および下部パネルの可視性に関するいくつかのプロパティがあります。このSplitPanelには、そのロジックだけがコードの背後にあります。実装が簡単で、将来のメンテナンスが容易になると期待しています。メインのXAMLとそのコードをシンプルに保つことができます。

関連する問題