完全な長方形（バインディングの幅と高さ）のコントロールを保持するWPF

Question

現在のところ、WPFでボックスの形でコントロールを表示してコード化する必要はありません。ここに私がそれを見せたいものの実例があります：

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="120"/> 
     <RowDefinition Height="3" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
    <StackPanel Orientation="Horizontal"> 
     <Button Margin="6" VerticalAlignment="Stretch" Width="{Binding Path=ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"> 
     <Grid> 
      <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="Auto" /> 
      </Grid.RowDefinitions> 
      <Image Source="http://blog.joeclarmusic.com/images/rss-icon.jpg" /> 
      <TextBlock Foreground="Black" TextAlignment="Center" Grid.Row="1" FontSize="11" Text="{Binding Path=Name}" Margin="0, 5, 0, 0" HorizontalAlignment="Center" TextWrapping="Wrap" /> 
     </Grid> 
     </Button> 
    </StackPanel> 
    <GridSplitter Grid.Row="1" Background="#DDDDDD" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" /> 
    </Grid> 

[OK]これはすべてクールでよくあります。私の現在のデザインでは、ItemsControlを使用して画像のリストを表示しています。このようなリストはウィンドウの幅を超えることができるので、VerticalScrollBarが無効になっているStackPanelの周りにScrollViewerを追加したいと思っていました（私は左から右にしか流れないので、Horizo​​ntalScrollBarが必要です）。私のコンピュータでkaxaml 1.7.1で動作している上記の

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="120"/> 
     <RowDefinition Height="3" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
    <ScrollViewer> 
     <StackPanel Orientation="Horizontal"> 
     <Button Margin="6" VerticalAlignment="Stretch" Width="{Binding Path=ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"> 
      <Grid> 
      <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="Auto" /> 
      </Grid.RowDefinitions> 
      <Image Source="http://blog.joeclarmusic.com/images/rss-icon.jpg" /> 
      <TextBlock Foreground="Black" TextAlignment="Center" Grid.Row="1" FontSize="11" Text="{Binding Path=Name}" Margin="0, 5, 0, 0" HorizontalAlignment="Center" TextWrapping="Wrap" /> 
     </Grid>  
     </Button> 
     </StackPanel> 
    </ScrollViewer> 
    <GridSplitter Grid.Row="1" Background="#DDDDDD" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" /> 
    </Grid> 

イメージ：ScrollViewerのを追加した後

jonatan.nilsson.is/wpf_with_scrollviewer.jpg

をあなたはKaxamlでそれを実行した場合（またはWPFウィンドウ/ページで）button will now keep on getting bigger and bigger (both width and height)。私が行った唯一の変更は、StackPanelの周りにScrollViewerを追加することです。それ以外のものはすべて同じですが、なぜスクロールビューワ内で大きくなっていくのですか？

私はここで間違っていますか？

編集： 2番目の例の結果のイメージが追加されました。

Answer 1

[OK]を、私は解決策を見つけたこの「行動」は、以下の条件が満たされた場合に発生します。

• の内容をボタンには画像が含まれています
• 幅/高さは高さ/幅に拘束されています。
• ボタンの内容は、それが（結合がheight-に設定されている>幅）幅のものより高くなっている

あなたは非常に簡単にこれをテストすることができます。 Button.Content内の画像を除くすべてを削除すると、全体が「ほぼ」機能します（グリッドスプリッタを使用して行の高さを小さくするとボタンは小さくなりませんが、大きくなります）。

しかし、Margin="0, 0, 0, 1"をImageに追加すると、以前と同じ動作が発生します（つまり、無限に拡大します）。何が起こっている

は基本的にはこれです：

1. ボタンの高さは、幅のものより高くなっています。バインディング
2. はそれを見て作る、それより広い
3. 画像は、それが広い得て見て、それを維持するために、高いそのものを作るの比率です（この場合は1：1）
4. 画像は、より高い自分自身をプッシュします。
5. ボタンの高さは、それが幅のものより高くなって、画像の行動は常に、それは比率です維持することですので、基本的に2

に進みます。この "振る舞い"を回避するには、ボタンの内容を高さよりも広くする必要があります。ボタンの内容の幅が高さよりも高い場合、Bindingは幅を強制的に小さくします。これは何とか画像が正しく動作するようにします。例えば、このために追加私の2番目の例では

、：それは成長を決して終わることのない年代のイメージに

Margin="30 ,0" 

は、問題を修正します。

私はこれを非常にうまく説明しているかどうか分かりませんので、この説明を改善するかもしれない提案があればコメントしてください。

Answer 2

EDIT： OK、私はあなたのコードをちょっと手抜きしましたが、ボタンが実際に無限に大きくなっていることを確認できます。なぜこれが起こっているのか、私は本当に言うことができません。おそらく、いくつかの内部測定値はボルケージになっているでしょう。ボタンのコンテンツ（この場合はGrid）としてパネルコントロールを使用すると、StackPanelやDockPanelなどの問題が発生することがわかりました。おそらく、これらのアイテムをボタンに入れず、代わりに他のコントロールを使用するほうがよいでしょう。それは本当にボタンである必要がありますか？

OLD：
グリッドセル自体が大きくなっているため、ボタンの高さが大きくなり続けています。グリッド・スプリッターを使ってグリッド・コンポーネントのサイズを変更すると、ボタンはセルの高さ全体を引き継ぎます。これを考えると、これがアイテムコントロールに存在するものなら、なぜグリッドスプリッタと空のセルが最初の場所にあるのでしょうか？

OLDER：
「高さがオーバーフローし続ける」とは、ボタンの幅と高さを意味すると仮定します。これは、高さに直接バインドされた幅を持つためです。

あなたが「オーバーフローしないように....」という意味ならば、それはあなたのグリッド行のサイズとは全く関係がない別の話です。実際の問題が何であるかを明確にし、例としていくつかの有効なXAMLを提供する必要があります。 。。（あなたのポストでのXAMLは、ボタンの内容で「」タグが欠落している

は