ListView でTextWrapping と背景色を同時に行いたい
解決済
回答 2
投稿
- 評価
- クリップ 0
- VIEW 576
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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
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>
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
試していませんが
<TextBlock Margin="6,0,6,0" Text="{Binding Data}" />
↓
<TextBlock Margin="6,0,6,0" Text="{Binding Data}" TextWrapping="Wrap" />
のようにラップを指定するとどうですかね?
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.32%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2020/03/31 09:10
前回に引き続きご丁寧な説明とコードの修正をいただきありがとうございます。
<Style BasedOn="{StaticResource {x:Type TextBlock}}" TargetType="{x:Type TextBlock}" />
は、呪文的感じがありますが、
「https://blogs.itmedia.co.jp/mohno/2013/12/xaml07-basedon-480f.html」
BasedOn を含めたスタイルの説明がありました。
ありがとうございました。