DEV GridControl TableView隔行換色/奇偶行換色

GridControl中的TableView“奇偶行換色”這件事情糾結了我好幾天，雖然已經是上個月的事情，好歹記錄一下吧，萬一有誰要用到呢。

GridControl是長這個樣子的，

<dxg:GridControl AutoPopulateColumns="True"   >
    <dxg:GridControl.View>
        <dxg:TableView AllowPerPixelScrolling="True" ShowTotalSummary="False" ShowGroupPanel="False">
        </dxg:TableView>
    </dxg:GridControl.View>
    <dxg:GridControl.Columns>
        <dxg:GridColumn Header="COL1"/>
        <dxg:GridColumn Header="COL2"/>
        <dxg:GridColumn Header="COL3"/>
    </dxg:GridControl.Columns>
</dxg:GridControl>

 

當時這個DEV的版本是V11.2的，原本准備升級到V15.0的，但最終還是未升級。

然后問題來了……

我們知道，更改奇偶行，其實是需要正對TableView的屬性來做點什么的。如果是V15.0的版本，那就很easy了，直接寫一個屬性AlternateRowBackground="顏色"就搞定了，但是，此時需要修改的是v11.2，呵呵噠~~說實話，我之前對這個什么鬼真的不熟悉啊，然后瘋狂的就是找資料，希望有人跟我會有相同的問題……

皇天不負有心人啊，終於有那么一絲絲的頭緒……有2篇文章(也許不能稱之為文章)對我很有幫助：

1、將轉換器與TableView的RowStyle進行綁定： http://www.itnose.net/detail/6150073.html，

左側是鏈接中的內容。 它的傳入條件是Row.ID,這個條件要求必須是GridColumn的FildName, 很明顯他的這個Id是列中原來就存在的。 對於我這種奇偶行變色但列中並不存在行號的人來說，並不可行。 於是，必須獲取行號……見2.

 

2、由於1不能解決行號的問題，於是，http://www.fx114.net/qa-141-73449.aspx，其實這個內容與TableView並不一樣，但是給了我一些啟發。。。

然后就有了我自己的代碼：

.cs

Style style = new Style(typeof(GridRowContent), tableView.RowStyle);
System.Windows.Data.Binding binding = new System.Windows.Data.Binding();
binding.Converter = new RowHandleToColorConverter();//不要條件，此時會將整個Row傳過去
binding.ConverterParameter = alternateRowBackground;
style.Setters.Add(new Setter(GridRowContent.BackgroundProperty, binding));
tableView.RowStyle = style;

RowHandleToColorConverter.cs

 public class RowHandleToColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            RowData r = value as RowData;
            int index = r.RowHandle.Value + 1;
            Brush brush = Brushes.Transparent;
            if ((int)index % 2 == 0)//或 if(r.EvenRow)
                brush = (Brush)parameter;
            else
                brush = Brushes.White;
            return brush;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return null;
        }
    }

 

然后，嗯，很開心，終於寫好了。。。but, 我后面發現當數據超過20條時，顏色就有些不太對了……

假設我原來希望綠白相間，現在可能會變成偶爾出現綠綠藍白，或者白白綠的現象。

             

不懂啊……總不能這樣子就上交任務啊。。。后面發現可能是GridControl的虛擬化造成的，本來就准備了20條數據的Row,當拖動滾動條時第21條數據可能占用了原來第1條數據的Row,想着把虛擬化關了吧，呵呵噠，沒有效果……想着要不把它能顯示的最大行數改一下，不好意思，沒這個功能……

好吧，最后我只能弱弱的去改TableView的模板了、、、

因為我需要用到的GridControl很多，就寫了一個通用的Style:

<Style x:Key="tableViewRowStyle" TargetType="{x:Type dxg:GridRowContent}">
    <Style.Triggers>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding EvenRow}" Value="True"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Background" Value="#FFFCFCFC"/>
        </MultiDataTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding EvenRow}" Value="True"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Background" Value="#FFF6F6F6"/>
        </MultiDataTrigger>
    </Style.Triggers>
</Style>

其中，x:Key="tableViewRowStyle"可以不寫，這樣所有的GridControl都會用這樣的RowStyle,也不不要綁定啦，如果自己單獨綁定的話只需要在TableView中寫上：

<dxg:TableView RowStyle="{StaticResource tableViewRowStyle}"  </dxg:TableView>

 

這樣比寫Converter簡單方便快捷多啦。。。

后來想到，畢竟這些顏色是固定的不是么，如果現在給你一個listBox,你選中哪個顏色A就把背景色變成A/白相間，要怎么辦呢?於是一個多值綁定+Converter的Demo就出爐了,思路其實還是基於以上2種，但是可以看看。

<local:RowHandleToColorMultiConverter x:Key="con"/>

<dxg:GridControl.View>
    <dxg:TableView AllowPerPixelScrolling="True" ShowTotalSummary="False" ShowGroupPanel="False">
        <dxg:TableView.Style>
            <Style TargetType="{x:Type dxg:GridRowContent}">
                <Setter Property="Background">
                    <Setter.Value>
                        <MultiBinding Converter="{StaticResource con}">
                            <Binding Path="RowHandle.Value"/>
                            <Binding ElementName="listBox" Path="SelectedItem.Name"/>
                        </MultiBinding>
                    </Setter.Value>
                </Setter>
            </Style>
        </dxg:TableView.Style>
    </dxg:TableView>
</dxg:GridControl.View>

其中：

1、SelectedItem.Name，是Item的名稱，在listBox.ItemsSource賦值的時候，把Name的值設定為顏色碼，不含"#"，如item.Name="FFF0F0F0"醬樣子的。。。

2、con這個轉換器還是要引用的

3、下面的其中object[] values與xaml中Binding是對應的。。

public class RowHandleToColorMultiConverter : IValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (values == null) return null;

            int index = (int)values[0];
            string value = values[1].ToString();
            Brush brush = Brushes.Transparent;
            if (value == "{DependencyProperty.UnsetValue}")
            {
                return brush;
            }

            if ((int)index % 2 == 0)
                brush =  (Brush)new BrushConverter().ConvertFromString("#" + value);
            else
                brush = Brushes.White;
            return brush;
        }

        public object ConvertBack(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return null;
        }
    } 

 

上個效果圖吧，　　　　

初始時，沒有顏色（代碼中可以設置默認顏色）	選擇綠色，顏色比較淡，但是還是可以看到的	換一個顏色，顏色比較淡

 

 

 

 

 

 

 

 

彈出來選擇顏色的框框是Listbox哦。。。因為Demo是在內網寫的，外網又沒有DEV，所以只能偷偷的用手機拍照啦。。。