1

現在、WPFアプリケーションのレイアウトを作成していますが、コントロールの1つのレイアウトに少し問題があるようです。このコントロールは動的にサイズ変更されるため、その一部であるビューポートのサイズに合わせる必要があります。私が遭遇している問題は非常に視覚的な問題なので、それを説明するために最善を尽くします。現時点では次のようになります。

代替テキストhttp://gallery.me.com/theplatz/100006/Capture/web.png?ver=12472534170001

各「ColNRowX」ヘッダーの下の領域は、さまざまな長さのテキストが配置されるTextBlockです。TextBlockを実際にラップさせるために、私はここで、テキストブロックの幅を列の幅にバインドするというスタックオーバーフローの解決策を見つけました。グリッド定義のスニペットと最初の列の定義を次に示します。

<!-- Change Detail Contents Grid -->
<Grid Grid.Row="1">
    <Grid.ColumnDefinitions>
    <ColumnDefinition MinWidth="270" Width="2*" />
    <ColumnDefinition MinWidth="160" Width="*" />
    <ColumnDefinition MinWidth="160" Width="*" />
    <ColumnDefinition MinWidth="160" Width="*" />
    </Grid.ColumnDefinitions>

    <!-- 
    We bind the width of the textblock to the width of this border to make sure things resize correctly.
    It's important that the margin be set to 1 larger than the margin of the textblock or else you'll end
    up in an infinate loop 
    -->
    <Border Grid.Column="0" Margin="6" Name="FirstBorder" />
    <Border Grid.Column="0" BorderThickness="0,0,1,0" BorderBrush="{DynamicResource   ColumnBorderBrush}">
    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0">
        <Border Style="{DynamicResource DetailHeadingBorder}">
                <TextBlock Text="Col 1 Row 1" Style="{DynamicResource DetailHeadingText}" />
            </Border>
                <TextBlock Text="{Binding IsReason, ElementName=ChangeDetailRoot}" Style="{DynamicResource DetailText}" Width="{Binding ActualWidth, ElementName=FirstBorder}" />
            </StackPanel>

    <StackPanel Grid.Row="1">
            <Border Style="{DynamicResource DetailHeadingBorder}">
            <TextBlock Text="Col 1 Row 2" Style="{DynamicResource DetailHeadingText}" />
            </Border>
        <TextBlock Text="{Binding WasReason, ElementName=ChangeDetailRoot}" Style="{DynamicResource DetailText}" Width="{Binding ActualWidth, ElementName=FirstBorder}" />
    </StackPanel>   
    </Grid>
    </Border>
</Grid>

ウィンドウ/ビューポートの幅が大きくなると、すべてが正常にサイズ変更されます。幅を狭くすると問題が明らかになります。最大化から元のサイズに突然移行すると、すべての列が指定されたサイズに「ダンス」して戻ります。これが意味するのは、各列が比例して小さいサイズにサイズ変更されるため、各列のサイズが小さくなるのを見ることができるということです。私が見つけたのは、これは直接原因であるということです

Width="{Binding ActualWidth, ElementName=FirstBorder}"

各TextBlockで。これらのコントロールの多くが一度に画面に表示されるほど、問題は著しく悪化します。ただし、その行がないと、各TextBlock内のテキストは、列に折り返されるのではなく、テキストが追加されるほど右に拡大し続けます。

私が達成しようとしていることを達成するためのより良い方法はありますか？HTML / CSSを使用すると、これを実行するのはかなり簡単です。私は何時間もグーグルでこの質問への答えを探してstackoverflowを調べてきました。

私はHTML/CSSの豊富なバックグラウンドを持っているので、これがWPFで得意なことではない場合は、お知らせください。

4

3 に答える 3

1

私は自分の質問に答えるのは嫌いですが、自分が間違っていたことを見つけたようです。最初の質問が出されてからかなり時間が経っているので、私が行おうとしたすべてのステップを思い出せませんが、これは私が知っていることです。各テキストブロックのスタイルは次のように設定されました。

<Style x:Key="DetailText" TargetType="TextBlock">
    <Setter Property="HorizontalAlignment" Value="Center" /> 
    <Setter Property="TextWrapping" Value="Wrap" /> 
    <Setter Property="TextAlignment" Value="Center" />
    <Setter Property="Margin" Value="5,5,5,5" />
</Style>

そのとき、それでは望ましい結果が得られなかったと思います。そのため、テキストブロックの幅を列の幅にバインドする必要がありました。今日遊んでいると、スタイルを次のように変更し（Horizo​​ntalAlignmentが異なることに注意してください）、バインディングを削除して、問題が解決したことを確認しました。

<Style x:Key="DetailText" TargetType="TextBlock">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="TextAlignment" Value="Center" />
    <Setter Property="Margin" Value="5,5,5,5" />
</Style>
于 2010-03-10T16:56:23.853 に答える
0

これを試したことをお詫びしますが、TextBlock.TextWrappingを「Wrap」に設定しても目標は達成されませんか？

グリッドがサイズ変更を処理するので、これにより、実行している幅にバインドする必要がなくなると思います。（これがおそらく今起こっていることです。グリッドは縮小するにつれてコントロールをレイアウトし、幅へのバインドによってサイズがわずかに変化し、ダンスが発生します。）

[アップデート]

私はあなたが見ている振る舞いを複製しようとしましたが、それは私にとってはうまくいきます。私は次のようにTextBlocksのシンプルなスタイルを作成しました。

<Style x:Key="DetailText" TargetType="{x:Type TextBlock}">
    <Setter Property="TextBlock.TextWrapping" Value="Wrap"/>                
</Style>

そして、私はあなたの他の動的リソースを持っていなかったDetailHeadingBorder, DetailHeadingText, or ColumnBorderBrushので（）、すべてが白黒（細かい）でした。

たぶんあなたは本当に古いグラフィックカードを持っていて、それはソフトウェアで物事をレンダリングしていますか？またはそれはあなたと関係がありますstyles。

于 2009-07-12T22:33:16.080 に答える
0

私はあなたの質問を誤解しなかったと思いますが、TextBlock.Widthをバインドする必要はないと思いますか？

このxamlは正しく機能しているようです：

  <Grid>
     <Grid.ColumnDefinitions>
        <ColumnDefinition MinWidth="270"
                          Width="2*" />
        <ColumnDefinition MinWidth="160"
                          Width="*" />
        <ColumnDefinition MinWidth="160"
                          Width="*" />
        <ColumnDefinition MinWidth="160"
                          Width="*" />
     </Grid.ColumnDefinitions>
     <!--     We bind the width of the textblock to the width of this border to make sure things resize correctly.    
           It's important that the margin be set to 1 larger than the margin of the textblock or else you'll end  
             up in an infinate loop     -->
     <Border Grid.Column="0"
             BorderThickness="0,0,1,0">
        <Grid>
           <Grid.RowDefinitions>
              <RowDefinition Height="*" />
              <RowDefinition Height="*" />
           </Grid.RowDefinitions>
           <StackPanel Grid.Row="0">
              <Border>
                 <TextBlock Text="Col 1 Row 1" />
              </Border>
              <TextBlock TextWrapping="Wrap"
                         Text="gfege dfh lh dfl dhliöslghklj h lglsdg fklghglfg flg lgheh" />
           </StackPanel>
           <StackPanel Grid.Row="1">
              <Border>
                 <TextBlock Text="Col 1 Row 2" />
              </Border>
              <TextBlock Text="Massor av text som blir en wrappning i slutändan hoppas jag"
                         TextWrapping="Wrap" />
           </StackPanel>
        </Grid>
     </Border>
  </Grid>

幅のバインディングを削除し、TextWrapping（おそらくスタイルに含まれている）を追加し、「FirstBorder」という名前の境界線も削除しました。

于 2009-09-23T14:44:57.577 に答える