Skip to main content
All docs
V24.2

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

ThemedWindow.LeftPanelContent Property

Gets or sets Side Panel content. This is a dependency property.

Namespace: DevExpress.Xpf.Core

Assembly: DevExpress.Xpf.Core.v24.2.dll

NuGet Package: DevExpress.Wpf.Core

#Declaration

public object LeftPanelContent { get; set; }

#Property Value

Type Description
Object

Side Panel content.

#Remarks

Set the ShowLeftPanel property to true to display the Side Panel.

WPF ThemedWindow - Full Height Side Panel

A portion of the Side Panel area that matches the window header position is non-interactive. If you place an interactive element in this area, set the element’s dx:WindowChromeHelper.IsHitTestVisibleInChrome attached property to true to enable user interaction.

The following code snippet specifies Side Panel content demonstrated in the image above:

<dx:ThemedWindow ...
                 xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
                 xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
                 xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:sys="clr-namespace:System;assembly=mscorlib"
                 x:Name="window"
                 ShowLeftPanel="True">
    <dx:ThemedWindow.DataContext>
        <local:MainWindowViewModel/>
    </dx:ThemedWindow.DataContext>

    <dx:ThemedWindow.LeftPanelContent>
        <Border BorderThickness="0,0,1,0"
                BorderBrush="LightGray"
                Width="200">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <dxe:SearchControl x:Name="searchControl"
                                   dx:WindowChromeHelper.IsHitTestVisibleInChrome="True"
                                   FilterCondition="Contains"
                                   ImmediateMRUPopup="False"
                                   ShowMRUButton="False"
                                   FilterByColumnsMode="Custom">
                    <dxe:SearchControl.ColumnProvider>
                        <dxe:SelectorEditColumnProvider>
                            <dxe:SelectorEditColumnProvider.CustomColumns>
                                <sys:String>Name</sys:String>
                            </dxe:SelectorEditColumnProvider.CustomColumns>
                        </dxe:SelectorEditColumnProvider>
                    </dxe:SearchControl.ColumnProvider>
                </dxe:SearchControl>

                <dxg:TreeViewControl x:Name="treeView"
                                     ItemsSource="{Binding EmployeeDepartments}"
                                     DataAreaBackground="{DXBinding '@a($dx:ThemedWindow).Background'}"
                                     FilterCriteria="{DXBinding '@e(searchControl).FilterCriteria'}"
                                     ChildNodesPath="Employees"
                                     TreeViewFieldName="Name"
                                     ShowBorder="False"
                                     Grid.Row="1"/>

                <dx:SimpleButton Glyph="{dx:DXImage 'SvgImages/Icon Builder/Actions_Arrow2Left.svg'}"
                                 GlyphHeight="20" GlyphWidth="20"
                                 Click="{DXEvent Handler='@e(window).ShowLeftPanel=false'}"
                                 HorizontalAlignment="Left" Margin="7" Grid.Row="2"/>
            </Grid>
        </Border>
    </dx:ThemedWindow.LeftPanelContent>

    <dx:ThemedWindow.Resources>
        <Style TargetType="dxg:TreeViewControlView">
            <Setter Property="HorizontalScrollbarVisibility" Value="Hidden"/>
            <Setter Property="FadeSelectionOnLostFocus" Value="False"/>
        </Style>
    </dx:ThemedWindow.Resources>

    <Grid>
        <!-- ... -->
    </Grid>
</dx:ThemedWindow>

LeftPanelContentTemplate and LeftPanelContentTemplateSelector properties allow you to define a template for panel content.

Refer to the following help topic for more information: Side Panel.

See Also