Optimized Mode Styles and Templates

• Jun 06, 2022
• 2 minutes to read

Below are examples of styles and templates for the unoptimized mode and their counterparts for the optimized mode.

RowStyle

XAML

<!--Unoptimized Grid Mode-->
<Style x:Key="unoptimizedRowStyle" TargetType="{x:Type dxg:GridRowContent}">
    <Style.Triggers>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=Row.Group}" Value="0"/>
                <Condition Binding="{Binding Path=SelectionState}" Value="None"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Background" Value="Pink"/>
        </MultiDataTrigger>
    </Style.Triggers>
</Style>
<!--Optimized Grid Mode-->
<Style x:Key="optimizedRowStyle" TargetType="{x:Type dxg:RowControl}">
    <Style.Triggers>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=Row.Group}" Value="0"/>
                <Condition Binding="{Binding Path=SelectionState}" Value="None"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Background" Value="Pink"/>
        </MultiDataTrigger>
    </Style.Triggers>
</Style>

CellStyle

XAML

<!--Unoptimized Grid Mode-->
<Style x:Key="unoptimizedCellStyle" TargetType="{x:Type dxg:CellContentPresenter}">
    <Style.Triggers>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=Column.FieldName}" Value="Group"/>
                <Condition Binding="{Binding Path=Value}" Value="0"/>
                <Condition Binding="{Binding Path=SelectionState}" Value="None"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Background" Value="Red"/>
        </MultiDataTrigger>
    </Style.Triggers>
</Style>
<!--Optimized Grid Mode-->
<Style x:Key="optimizedCellStyle" TargetType="{x:Type dxg:LightweightCellEditor}">
    <Style.Triggers>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=Column.FieldName}" Value="Group"/>
                <Condition Binding="{Binding Path=Value}" Value="0"/>
                <Condition Binding="{Binding Path=SelectionState}" Value="None"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Background" Value="Red"/>
        </MultiDataTrigger>
    </Style.Triggers>
</Style>

CellTemplate

XAML

<!--Unoptimized Grid Mode-->
<DataTemplate x:Key="unoptimizedCellTemplate">
    <dxe:SpinEdit x:Name="PART_Editor" Mask="c" MaskUseAsDisplayFormat="True" AllowRoundOutOfRangeValue="True"/>
</DataTemplate>
<!--Optimized Grid Mode-->
<Style x:Key="activeSpinEditStyle" TargetType="dxe:SpinEdit">
    <Setter Property="AllowRoundOutOfRangeValue" Value="True"/>
</Style>
<DataTemplate x:Key="optimizedCellTemplate">
    <dxe:InplaceBaseEdit x:Name="PART_Editor" EditCoreStyle="{StaticResource activeSpinEditStyle}"/>
</DataTemplate>

DataRowTemplate (Unoptimized Grid Mode) and RowDetailsTemplate (Optimized Grid Mode)

XAML

<!--Unoptimized Grid Mode-->
<BooleanToVisibilityConverter x:Key="booleanToVisibilityConverter"/>
<DataTemplate x:Key="dataRowTemplate">
    <StackPanel>
        <ContentPresenter ContentTemplate="{Binding Path=View.DefaultDataRowTemplate}"/>
        <Border Background="{DynamicResource {dxgt:GridRowThemeKey ResourceKey=GridDataRowDelimiterBrush}}" Height="1"/>
        <TextBlock Text="Details" HorizontalAlignment="Center" FontSize="40" FontWeight="Bold" Visibility="{Binding Path=IsFocused, Converter={StaticResource booleanToVisibilityConverter}}"/>
    </StackPanel>
</DataTemplate>
<!--Optimized Grid Mode-->
<DataTemplate x:Key="rowDetailsTemplate">
    <TextBlock Text="Details" HorizontalAlignment="Center" FontSize="40" FontWeight="Bold"/>
</DataTemplate>