2012-04-19 14 views
0

アプリケーションのUIが2つに分割されています。左側がナビゲーションメニュー、右側が選択されたメニューコンテンツが表示されるビューエリアです。今、メニューの1つはレポートです。私はヘッダーとコンテンツテンプレートでTabcontrolを使用しています。テンプレートには、DataTypeとしてViewModelがあり、UserControlであるそれぞれのViewとしてコンテンツがあります。このTabControlは、スクロールビューアの内側にあり、伸縮する水平方向および垂直方向の配置として設定されています。タブの追加時にTabControlの幅が増加する

ユーザ制御ホスト子としてレポートビューアーを有するReportHostに結合されているグリッド内部のContentPresenter。このReportViewerを使用してレポートを生成しています。

ユーザーがレポートを開くと、それが新しいタブで開きます。タブの数が表示領域内に含まれるようにタブの数が変わるまでうまく機能します。しかし、タブを追加するとタブコントロールの幅が広がり、タブのコンテンツ領域が伸び、コンテンツプレゼンターも伸びて水平スクロールが表示されます。 これが最終的に私には未知の何らかの理由に伸ばし、起因してレポートになり、それはUIの一部ではないが、それをオーバーラップしているかのように、報告書では、UIのナビゲーション領域と重なります。レポート全体は、スクロール時にビュー領域とナビゲーションメニューの上に浮かんでいます。

私は、ScrollViewerのにMaxWidthプロパティを提供することで、それを修正することができますが、私はそれを行うにはしたくありません。私はtabcontrollまたはScrolviewerの幅を、利用可能なView Areaに基づいて純粋に決定したいと思います。固定幅を使用せずにコードまたはXAMLを使用してこれを行うにはどうすればよいですか。

私は状況を説明することができたかどうかわからないです。より多くの情報や説明が必要な場合は教えてください。私は詳細を提供することよりも喜んでいるでしょう。

編集:情報のコードを追加します。

<DataTemplate x:Key="TabContent" DataType="{x:Type VM:ReportViewModel}"> 
    <View:Report/> 
</DataTemplate> 
<DataTemplate x:Key="TabHeader" DataType="{x:Type VM:ReportViewModel}"> 
    <ContentPresenter Content="{Binding Path=TabHeader}" 
    VerticalAlignment="Center"/> 
</DataTemplate> 

<ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
    HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"> 
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
    <Grid.RowDefinitions> 
    <RowDefinition Height="Auto"/> 
    <RowDefinition Height="*"/> 
    <RowDefinition Height="Auto"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
    <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" 
     Text="Reports" VerticalAlignment="Top" Margin="10,13,0,0" 
     FontSize="18.667" FontFamily="Segoe UI" Foreground="White"/> 
    <Border BorderThickness="0" Margin="0,50,0,0" 
     Background="{DynamicResource Brush_HeaderNew}" Height="50" Width="Auto" 
     VerticalAlignment="Top"/> 
    <TabControl ItemsSource="{Binding ReportItems}" Grid.Row="1" Margin="0,20,0,0" 
     SelectedItem="{Binding SelectedReportItem}" 
     ContentTemplate="{StaticResource TabContent}" 
     ItemTemplate="{StaticResource TabHeader}" 
    /> 
    </Grid> 
</ScrollViewer> 

答えて

1

ScrollViewerそれがScrollViewer自体に利用可能なスペースよりも大きいです場合、それはちょうど、スクロールを提供することができた理由ので、その子に自分自身を設定する上無限大面積を提供します。あなたのスクロールは両方向で有効になっているので、TabControlはどちらの方向にも好きなだけ拡大でき、それがScrollViewerの中に入っていることを知るのに十分スマートではなく、タブを利用したくないこの仮想空間。

ScrollViewerTabControl内に移動して、タブの内容のみがセット全体ではなくスクロール可能になるようにすることをおすすめします。タブのコンテンツテンプレートを変更することでそれを実行できるはずです。

+0

うわー、うまくいった。唯一のことは、タブが多くなると、タブヘッダーが複数の行に表示されることです。しかし、私はそれで生きることができると思います。本当にありがとう。 –

+0

あなたはそれを修正できますが、それは 'TabControl'のテンプレートを変更することを伴い、複雑です。ウェブの周りには、複数の行を生成するのではなく、スクロールするタブや他のいくつかの選択肢を持つ記事があります。 –

+0

私は見つけようとしますが、万が一、同じ実装のリンクがあれば、それを共有できれば嬉しいです。 –

関連する問題