کنترل Expander :
این کنترل بدون شک یکی از کنترل های پر کاربردی است که برنامه نویسان همیشه به دنبال آن جهت استفاده در برنامه های خود بوده اند. از زمان ظهور دات نت، این کنترل به صورت پیش فرض در ویژوال استودیو وجود نداشت و برنامه نویسان مجبور بودند یا خود اقدام به ایجاد چنین کنترلی نمایند و یا به سمت کنترل های نوشته شده توسط اشخاص و شرکت های ثالث روی آورند.
ماکروسافت در ویژوال استودیو 2008 و در تکنولوژی WPF ، این کنترل را برای استفاده کاربران قرار داد. این کنترل دارای دو بخش می باشد، بخش هدر و یک بخش محتوا. بخش هدر شامل یک دکمه که غالبا به صورت فلش است، می باشد. کاربر با کلیک کردن بر روی این دکمه می تواند بخش Content را مخفی کند و یا آن را از حالت مخفی خارج نماید.
بخش Content این کنترل نیز مانند همه عناصر WPF می تواند شامل هر عنصر دیگری باشد.
نحوه استفاده از این کنترل بسیار ساده می باشد. با استفاده از قطعه کد زیر می توانید یک کنترل Expander ایجاد نمایید:
<Expander Header="sample text header">sample text content</Expander>
قطعه کد فوق ساده ترین حالت تعریف یک کنترل Expander می باشد که شامل یک متن ساده به عنوان هدر و یک متن ساده دیگر به عنوان محتوا می باشد. چنانچه بخواهید از هدر و محتواهای پیچیده تر و پیشرفته تر و سفارشی خود در کنترل Expander استفاده کنید، بایستی کنترل Expander را به صورت زیر تعریف کنید:
<Expander >
<Expander.Header>
.
.
.
</Expander.Header>
<Expander.Content>
.
.
.
</Expander.Content>
</Expander>
در این حالت میتوانید با قرار دادن یک کنترل کانتیر در بخش مورد نظر، اقدام به ایجاد هدر و محتواهای مورد نظر خود کنید.
جهت در ک بیشتر به مثال زیر توجه کنید :
<Window x:Class="contentControls.ExpnaderControl"
xmlns="http://schemas.microsoft.com/winfx/2...l/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ExpnaderControl" Height="400" Width="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- Define Expanders-->
<Expander Header="simple expander" BorderBrush="Green" BorderThickness="2" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">sample content</Expander>
<Expander Margin="5" Grid.Row="0" Grid.Column="1" IsExpanded="True" HorizontalContentAlignment="Left" BorderBrush="Brown" BorderThickness="3">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Padding="3">Country GroupBox</TextBlock>
<Image Source=".\Images\banner.png" MaxWidth="20" MaxHeight="20"></Image>
</StackPanel>
</Expander.Header>
<Expander.Content>
<GroupBox Margin="10" Padding="10" VerticalAlignment="Top">
<StackPanel>
<RadioButton Margin="3" Name="rbtn6" IsChecked="True">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\Iran.ico" MaxWidth="20" MaxHeight="20"/>
<TextBlock>(Iran)</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn7">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\Albania.ico" MaxWidth="20" MaxHeight="20"/>
<TextBlock>(Albani)</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn8">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\Hong-Kong.ico" MaxWidth="20" MaxHeight="20"/>
<TextBlock>(Hong-Kong)</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn9">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\Italy.ico" MaxWidth="20" MaxHeight="20"/>
<TextBlock>(Italy)</TextBlock>
</StackPanel>
</RadioButton>
</StackPanel>
</GroupBox>
</Expander.Content>
</Expander>
<Expander IsExpanded="True" Grid.Row="1" Header="Gradient Expander" BorderBrush="Red" BorderThickness="2">
<Expander.Background>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStop Color="Green" Offset="0"/>
<GradientStop Color="Wheat" Offset="1"/>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Expander.Background>
<Expander.Content>
<GroupBox BorderBrush="Brown" BorderThickness="3" Margin="10" Padding="10" VerticalAlignment="Top">
<StackPanel>
<RadioButton Margin="3" Name="rbtn1" IsChecked="True" >
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
</RadioButton>
<RadioButton Margin="3" Name="rbtn2">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn3">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn4">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
</StackPanel>
</RadioButton>
<RadioButton Margin="3" Name="rbtn5">
<StackPanel Orientation="Horizontal">
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
<Image Source=".\Images\star.png" MaxHeight="16" MaxWidth="16"></Image>
</StackPanel>
</RadioButton>
</StackPanel>
</GroupBox>
</Expander.Content>
</Expander>
<Expander BorderBrush="CadetBlue" BorderThickness="3" IsExpanded="True" Grid.Row="1" Grid.Column="1" Header="Larg Content text">
<ScrollViewer>
<TextBlock TextWrapping="Wrap">
From WikiPedia
he Windows Presentation Foundation (or WPF),
formerly code-named Avalon, is the graphical subsystem feature of the .NET Framework 3.0
(formerly called WinFX)[1] and is directly related to XAML.[2] It is pre-installed in Windows
Vista,[3] the latest version of the Microsoft Windows operating system. WPF is also available
for installation on Windows XP SP2 and Windows Server 2003. It provides a consistent programming
model for building applications and provides a clear separation between the UI and the business logic.
A WPF application can be deployed on the desktop or hosted in a web browser. It also enables rich control,
design, and development of the visual aspects of Windows programs. It aims to unify a host of application
services: user interface, 2D and 3D drawing, fixed and adaptive documents, advanced typography, vector graphics,
raster graphics, animation, data binding, audio and video. Although WinForms will continue to be widely used,
WPF is now the preferred choice for developing line of business applications, especially since the release of
the .NET Framework 3.5, Visual Studio 2008, and Expression Blend[4].
Microsoft Silverlight is a web-based subset of WPF. During development it was named WPF/E, which stood for "Windows Presentation
Foundation/Everywhere". The Silverlight subset enables Flash-like web and mobile applications with the same code
as Windows .NET applications. 3D features are not supported, but XPS and vector-based drawing are included.
The architecture of Windows Presentation Foundation spans across both managed code and native code components; however, the public
API exposed is only available via managed code. While the majority of WPF is in managed code, the composition
engine which renders the WPF applications is a native component. It is named as Media Integration Layer (MIL)
and resides as milcore.dll. It interfaces directly with DirectX and provides basic support for 2D and 3D surfaces
, timer-controlled manipulation of contents of a surface with a view to exposing animation constructs at a higher
level, and compositing the individual elements of a WPF application into a final 3D "scene" that represents
the UI of the application and rendering it to the screen.[5][6] The media codecs are also implemented in unmanaged
code, and are shipped as windowscodecs.dll.[5] In the managed world, PresentationCore (presentationcore.dll) provides
a managed wrapper for MIL as well as implements the core services for WPF,[5] including a property system
that is aware of the dependencies between the setters and consumers of the property, a message dispatching system by
means of a Dispatcher object to implement a specialized event system and services which can implement a layout system
such as measurement for UI elements.[6] PresentationFramework (presentationframework.dll) implements the end-user
presentational features, including layouts, time-dependent, story-board based animations, and data binding.[6]
WPF exposes a property system for objects which inherit from DependencyObject, that is aware of the dependencies between the consumers
of the property, and can trigger actions based on changes in properties. Properties can be either hard coded values
or expressions, which are specific expressions that evaluate to a result. In the initial release, however, the set of
expressions supported is closed.[6] The value of the properties can be inherited from parent objects as well. WPF properties
support change notifications, which invoke bound behaviors whenever some property of some element is changed. Custom behaviors
can be used to propagate a property change notification across a set of WPF objects. This is used by the layout system to trigger
a recalculation of the layout on property-changes, thus exposing a declarative programming style for WPF, whereby almost everything,
from setting colors and positions to animating elements can be achieved by setting properties.[6] This allows WPF applications to be written
in XAML, which is a declarative mark-up language, by binding the keywords and attributes directly to WPF classes and properties.
The UI elements of an WPF application is maintained as a class of Visual objects. Visual objects provide a managed interface to a composition tree which
is maintained by Media Integration Layer (MIL). Each element of WPF creates and adds one or more composition nodes to the tree. The composition
nodes contain rendering instructions, such as clipping and transformation instructions, along with other visual attributes. Thus the entire application
is represented as a collection of composition nodes, which are stored in a buffer in the system memory. Periodically, MIL walks the tree and executes the
rendering instructions in each node, thus compositing each element on to a DirectX surface, which is then rendered on screen. MIL uses the painter's algorithm,
where all the components are rendered from back of the screen to the front, which allows complex effects like transparencies to be easily achieved. This rendering
process is hardware accelerated using the GPU.[6] The composition tree is cached by MIL, creating a retained mode graphics, so that any changes to the composition tree
needs only to be incrementally communicated to MIL. This also frees the applications of managing repainting the screen, MIL can do that itself as it has all the information
necessary. Animations can be implemented as time-triggered changes to the composition tree. On the user visible side, animations are specified declaratively, by setting some
animation effect to some element via a property and specifying the duration. The code-behind updates the specific nodes of the tree, via Visual objects, to represent both the
intermediate states at specified time intervals as well as the final state of the element. MIL will render the changes to the element automatically.
All WPF applications start with two threads: one for managing the UI and another background thread for handling rendering and repainting.[7] Rendering and repainting is managed by WPF itself,
without any developer intervention. The UI thread houses the Dispatcher (via an instance of DispatcherObject), which maintains a queue of UI operations that need to be performed
(as a tree of Visual objects), sorted by priority. UI events, including changing a property that affects the layout, and user interaction events raised are queued up in the dispatcher,
which invokes the handlers for the events. Microsoft recommends that the event handlers only update the properties to reflect new content for application responsiveness; the new content
be generated or retrieved in a background thread.[7] The render thread picks up a copy of the visual tree and walks the tree calculating which components will be visible and renders them
to Direct3D surfaces. The render thread also caches the visual tree, so only changes to the tree need to be communicated, which will result in updating only the changed pixels. WPF supports
an extensible layout model. Layout is divided into two phases: Measure and Arrange. The Measure phase recursively calls all elements and determine the size they will take. In the Arrange phase,
the child elements are recursively arranged by their parents, invoking the layout algorithm of the layout module in use.[6][8]
</TextBlock>
</ScrollViewer>
</Expander>
</Grid>
</Window>
کد فوق، چهار کنترل Expander ایجاد می کند. هر کنترل Expander دارای هدر و محتوای خاص خود می باشد.
نتیجه اجرای کد فوق را در شکل زیر مشاهده می کنید:
همانطور که مشاهده می کنید، هر یک از کنترل های Expander در شکل فوق به نحو دلخواهی ساز ماندهی شده اند و دارای مقادیر هدر و محتوای خود می باشند.
خاصیت IsExpanded :
این خاصیت حالت کنترل Expander را نشان می دهد. به طور کلی کنترل Expander دارای دو حالت می باشد:
حالت اول: زمانی که مقدار خاصیت IsExpanded را برابر با False قرار می دهید. در این حالت، بخش محتوای کنترل Expander به صورت مخفی در خواهد آمد.
حالت دوم: این حالت عکس حالت اول می باشد. در این حالت بخش محتوای کنترل Expander در حالت نمایش می باشد.
نکته: مقدار پیش فرض خاصیت IsExpanded برابر با False می باشد.
**
نحوه استفاده از این خاصیت در کد XAML به صوزت زیر می باشد:
<Expander . . . IsExpanded="True"> . . . </Expander>
مشخص کردن جهت Expand در کنترل Expander :
کنترل Expander دارای خاصیتی به نام ExpanderDirection می باشد که جهت باز و بسته شدن کنترل Expander را مشخص می کند. این خاصیت داراری چهار مقدار Down، Up، Left و Right می باشد که مقدار پیش فرض آن برابرا با Down می باشد.
نحوه به کار بردن این خاصیت در کد XAML به صورت زیر می باشد:
<Expander ExpandDirection="Up" . . .>
.
.
.
.
</Expander>
شکل زیر، نتیجه استفاده از هر یک از چهار مقدار خاصیت ExpanderDirection را نشان می دهد :
خاصیت FlowDirection
این خاصیت دارای دو مقدار LeftToRight و RightToLeft می باشد که مقدار LeftToRight حالت پیش فرض آن می باشد. این خاصیت نحوه چیدمان کنترل Epander را نشان می دهد. مقدار RightToLeft برای زبان هایی همچون فارسی، عربی و ... که چیدمان الفبای آن ها از سمت راست می باشد، مناسب می باشد.
