質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.32%

ListView でTextWrapping と背景色を同時に行いたい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 576

byori

score 17

ListView 内のテキストを TextWrapping で全部を表示させるようにしていましたが、
背景色を付けたいために下記のように変更しました。

A:<GridViewColumn Header = "Name" Width="80" DisplayMemberBinding="{Binding Name}" />
を
B:<GridViewColumn Width="190" Header="Data" >
     <GridViewColumn.CellTemplate>
          <DataTemplate>
               <Border x:Name="bg" Margin="-6,0,-6,0">
                    <TextBlock Margin="6,0,6,0" Text="{Binding Data}" />
               </Border>
               <DataTemplate.Resources>
                    <Style TargetType="{x:Type TextBlock}">
                          <Setter Property="Background" Value="{Binding BkColor}" />
                    </Style>
               </DataTemplate.Resources>
          </DataTemplate>
     </GridViewColumn.CellTemplate>
</GridViewColumn>


としました(A:->B:に変更)。背景色は目的通りできました。

しかしながら、<CheckBox x:Name="check3" Content="テキストを折り返して表示する"・・・
チェックボックスにチェックを入れても折り返さなくなりました。
下記コードの「<GridViewColumn Header = "Name"・・」隣のカラムのデータは、折り返しています。
上記コードのA:なら折り返すことは確認しましたが、背景色も同時に行いたいです。
どのようにしたらいいですか?
よろしくお願いします。

Windows10 VS2015 C# WPF

その部分のコードです。

<ListView Margin = "8,0" x:Name="lvUsers" MouseMove="listView_MouseMove" BorderThickness="1" Height="485" Width="340"
           ItemsSource="{Binding Source={StaticResource comment}}" ScrollViewer.VerticalScrollBarVisibility="Auto">
      <ListView.Resources>
            <Style TargetType="{x:Type ListViewItem}">
                   <Style.Resources>
                         <Style TargetType="{x:Type TextBlock}">
                               <Setter Property="ToolTip" Value="{Binding Text, RelativeSource={RelativeSource Self}}" />
                               <!-- <Setter Property="Background" Value="{Binding BkColor}"/> -->
                               <Style.Triggers>
                                       <DataTrigger Binding="{Binding IsChecked, ElementName=check3}" Value="True">
                                              <!-- <Setter Property="FontWeight" Value="Bold" /> -->
                                              <Setter Property="TextWrapping" Value="Wrap" />
                                       </DataTrigger>
                                       <DataTrigger Binding="{Binding SearchResult}" Value="True">
                                              <Setter Property="Background" Value="Purple"/>
                                       </DataTrigger>
                               </Style.Triggers>
                         </Style>
                    </Style.Resources>
                    <Setter Property="Template">
                          <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ListViewItem}">
                                       <GridViewRowPresenter />
                                </ControlTemplate>
                          </Setter.Value>
                    </Setter>
              </Style>
       </ListView.Resources>

       <ListView.ItemsPanel>
              <ItemsPanelTemplate>
                    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" />
              </ItemsPanelTemplate>
       </ListView.ItemsPanel>
       <ListView.View>
              <GridView>
                   <GridViewColumn Header = "No" Width="30" DisplayMemberBinding="{Binding No}" />
                   <GridViewColumn Header = "Name" Width="80" DisplayMemberBinding="{Binding Name}" />
                   <!-- <GridViewColumn Header = "Data" Width="170" DisplayMemberBinding="{Binding Data}" /> -->
                   <GridViewColumn Width="190" Header="Data" >
                           <GridViewColumn.CellTemplate>
                                   <DataTemplate>
                                          <Border x:Name="bg" Margin="-6,0,-6,0">  <!-- テキストラッピングが効かないのでコメントに! -->
                                                 <TextBlock Margin="6,0,6,0" Text="{Binding Data}" />
                                          </Border>
                                          <DataTemplate.Resources>
                                                 <Style TargetType="{x:Type TextBlock}">
                                                       <Setter Property="Background" Value="{Binding BkColor}" />
                                                 </Style>
                                          </DataTemplate.Resources>
                                   </DataTemplate>
                           </GridViewColumn.CellTemplate>
                    </GridViewColumn>
              </GridView>
        </ListView.View>
</ListView>


<CheckBox x:Name="check3" Content="テキストを折り返して表示する" Foreground="Red">
       <CheckBox.Style>
              <Style TargetType="{x:Type CheckBox}">
                     <Style.Triggers>
                           <Trigger Property="IsChecked" Value="True">
                                   <Setter Property="Foreground" Value="Blue" />
                           </Trigger>
                     </Style.Triggers>
              </Style>
       </CheckBox.Style>
</CheckBox>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

Resources内のStyleが、DataTemplateには当たらないのが原因ですね。
xaml - WPF Some styles not applied on DataTemplate controls - Stack Overflow

他の修正点

  • 色を付けた際カラム間の隙間が気になって<Border x:Name="bg">を付けたが、気になっていないようなので不要
  • CheckBox Triggerが動いていない
<Window
  x:Class="Questions250285.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:Questions250285"
  Width="400"
  Height="240">
  <Window.Resources>
    <x:Array x:Key="comment" Type="{x:Type local:User}">
      <local:User
        Name="WPF C# VS2015"
        BkColor="Red"
        Data="bbb"
        No="1"
        SearchResult="True" />
      <local:User
        Name="WPF C# VS2017"
        BkColor="Yellow"
        Data="bbbbbbbbb"
        No="2" />
      <local:User
        Name="WPF C# VS2019"
        Data="bbbbbbbbbbbbbbbbbbbbbbbbbbb"
        No="3" />
    </x:Array>
  </Window.Resources>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <ListView ItemsSource="{Binding Source={StaticResource comment}}">
      <ListView.Resources>
        <Style TargetType="{x:Type TextBlock}">
          <Setter Property="ToolTip" Value="{Binding Text, RelativeSource={RelativeSource Self}}" />
          <Style.Triggers>
            <DataTrigger Binding="{Binding IsChecked, ElementName=check3}" Value="True">
              <Setter Property="TextWrapping" Value="Wrap" />
            </DataTrigger>
            <DataTrigger Binding="{Binding SearchResult}" Value="True">
              <Setter Property="Background" Value="Purple" />
            </DataTrigger>
          </Style.Triggers>
        </Style>

        <Style TargetType="{x:Type ListViewItem}">
          <!--  引き延ばしたほうがいいでしょうか?  -->
          <Setter Property="HorizontalContentAlignment" Value="Stretch" />
          <Setter Property="VerticalContentAlignment" Value="Stretch" />

          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type ListViewItem}">
                <GridViewRowPresenter />
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </ListView.Resources>

      <!--  前も指摘しましたがこれはおかしいです  -->
      <!--<ListView.ItemsPanel>
        <ItemsPanelTemplate>
          <StackPanel HorizontalAlignment="Center" Orientation="Vertical" />
        </ItemsPanelTemplate>
      </ListView.ItemsPanel>-->

      <ListView.View>
        <GridView>
          <GridViewColumn
            Width="30"
            DisplayMemberBinding="{Binding No}"
            Header="No" />
          <GridViewColumn
            Width="80"
            DisplayMemberBinding="{Binding Name}"
            Header="Name" />
          <GridViewColumn Width="190" Header="Data">
            <GridViewColumn.CellTemplate>
              <DataTemplate>
                <!--  https://stackoverflow.com/questions/2476305/wpf-some-styles-not-applied-on-datatemplate-controls#answer-16974988  -->
                <!--  ListView.Resourcesで定義しているスタイルを引っ張ってくる ハックっぽいが2回DataTrigger書くよりいいでしょう  -->
                <DataTemplate.Resources>
                  <Style BasedOn="{StaticResource {x:Type TextBlock}}" TargetType="{x:Type TextBlock}" />
                </DataTemplate.Resources>
                <!--  Backgroundは上書きするのでPurpleになることはない  -->
                <TextBlock Background="{Binding BkColor}" Text="{Binding Data}" />
              </DataTemplate>
            </GridViewColumn.CellTemplate>
          </GridViewColumn>
        </GridView>
      </ListView.View>
    </ListView>

    <CheckBox
      x:Name="check3"
      Grid.Row="1"
      VerticalContentAlignment="Center"
      Content="テキストを折り返して表示する">
      <CheckBox.Style>
        <Style TargetType="{x:Type CheckBox}">
          <!--  こうでないと意図通りになっていない  -->
          <Setter Property="Foreground" Value="Red" />
          <Style.Triggers>
            <Trigger Property="IsChecked" Value="True">
              <Setter Property="Foreground" Value="Blue" />
            </Trigger>
          </Style.Triggers>
        </Style>
      </CheckBox.Style>
    </CheckBox>
  </Grid>
</Window>


NoWrap
Wrap

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/31 09:10

    TN8001 様、
    前回に引き続きご丁寧な説明とコードの修正をいただきありがとうございます。

    <Style BasedOn="{StaticResource {x:Type TextBlock}}" TargetType="{x:Type TextBlock}" />
    は、呪文的感じがありますが、
    https://blogs.itmedia.co.jp/mohno/2013/12/xaml07-basedon-480f.html
    BasedOn を含めたスタイルの説明がありました。

    ありがとうございました。

    キャンセル

0

試していませんが

<TextBlock Margin="6,0,6,0" Text="{Binding Data}" />

<TextBlock Margin="6,0,6,0" Text="{Binding Data}" TextWrapping="Wrap" />

のようにラップを指定するとどうですかね?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/30 16:23

    お世話になります。
    常にラップするならそれでもよさそうですが、
    <CheckBox x:Name="check3" Content="テキストを折り返して表示する" Foreground="Red">
    で、ラップする・しないを行いたいです。

    キャンセル

  • 2020/03/30 17:52

    Triggerの方で切り替えようとしたところが反映されないという質問だったんですね。失礼しました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る