Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Optimized Mode Styles and Templates

  • 2 minutes to read

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

#RowStyle

<!--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

<!--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

<!--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)

<!--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>