読者です 読者をやめる 読者になる 読者になる

物知らずPGの覚え書き

「理解したこと」や「こうやって使えた」などのプログラムの覚え書きとなります

ListViewのデータに応じて背景色を変更

ListViewのある一定の条件を満たすデータのみに対して

背景色を変化するようなプログラムをググったが、

WPFのがあまり見つからなかった。。。。(見つけても理解できなかった←)

そこで、間違っているかもしれないが自分なりに出来た方法を記載する

   

 

今回作成するプログラムは、

性別がManで所持金が5000円以上の行を対象として、その行の背景色のみを赤くする

■ xaml

<Grid>
    <ListView x:Name="listview1"  VerticalAlignment="Top" ItemsSource="{Binding}" Margin="10,10,154,0" Height="224">
        <ListView.ItemContainerStyle>
            <Style TargetType="{x:Type ListViewItem}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding judge}" Value="yes">
                        <Setter Property="BorderBrush" Value="Red"/>
                        <Setter Property="Background" Value="#FFF9C5C5"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.View>
            <GridView>
                <GridViewColumn Width="100" Header="Number" DisplayMemberBinding="{Binding number}" />
                <GridViewColumn Width="100" Header="Sex" DisplayMemberBinding="{Binding sex}"/>
                <GridViewColumn Width="100" Header="Money" DisplayMemberBinding="{Binding money}"/>
            </GridView>
        </ListView.View>
    </ListView>
</Grid>

 

■ cs

public MainWindow()
{
    InitializeComponent();

    CollectionViewSource view = new CollectionViewSource();
    ObservableCollection<Person> viewItems = new ObservableCollection<Person>();

    ////////////1人目///////////////////////////
    Person person = new Person
    {
        number = 1,
        sex = "Man",
        money = 4000,
    };
    viewItems.Add(person);

    ////////////2人目///////////////////////////
    person = new Person
    {
        number = 2,
        sex = "Woman",
        money = 10000,
    };
    viewItems.Add(person);

    ////////////3人目///////////////////////////
    person = new Person
    {
        number = 3,
        sex = "Man",
        money = 7000,
    };
    viewItems.Add(person);
    
    ////////////4人目///////////////////////////
    person = new Person
    {
        number = 4,
        sex = "Woman",
        money = 2000,
    };
    viewItems.Add(person);

    /////////判定条件//////////////
    for (int i = 0; i < viewItems.Count; i++)
    {
        var personInfo = viewItems[i];

        if (personInfo.sex == "Man" && personInfo.money >= 5000)
        {
            viewItems[i].judge = "yes";
        }
        else
        {
            viewItems[i].judge = "no";
        }
    }

    this.listview1.DataContext = view;
    view.Source = viewItems;          
}

 

■ Personクラス  

class Person
{
    public int number { getset; }
    public string sex { getset; }
    public int money { getset; }
    public string judge { getset; }

}

  

解説

 

このプログラムでは背景色を変更する行としない行を区別するために

Personクラスにjudgeを用意している。(judgeには"yes" or "no"が格納)

そして、以下のDataTriggerでjudgeの値が"yes"の行の背景色を変更する 

<DataTrigger Binding="{Binding judge}" Value="yes">
    <Setter Property="BorderBrush" Value="Red"/>
    <Setter Property="Background" Value="#FFF9C5C5"/>
</DataTrigger>

 

 

実行結果

 

以下が実行画面となる。 

正しく条件指定(Man && money >= 5000 )した行のみが赤くなっている。

f:id:YoiTaka:20161128143333p:plain

 

おわりに

 

なんとか条件指定した行のみの色変えることは出来た。。。

しかし、現状では、前もって条件設定しておかなければいけないの

リアルタイムで条件を変更できるように改善したい

/* パンくずリスト*/ /* カテゴリ階層化*/