mirror of
https://github.com/Stone-Red-Code/docs-desktop.git
synced 2026-09-05 23:42:58 +02:00
Initial WPF content migrated (#17)
* Reset branch for WPF changes * Convert BMP to PNG; fix link-out-of-scope err * Add snippets for WPF... 6794 files!!!! * Add missing snippets * update file updated between migration * Fix paths to include * update breadcrumb and toc * fix index links * fix index links * fix index links * fix markdown
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
---
|
||||
title: "Adorners How-to Topics"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "adorners [WPF], how-to topics"
|
||||
ms.assetid: e29d7516-d5e6-4500-bd4f-775e6f830984
|
||||
---
|
||||
# Adorners How-to Topics
|
||||
The following examples demonstrate how to accomplish common tasks using the [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] adorner framework.
|
||||
|
||||
## In This Section
|
||||
[Implement an Adorner](how-to-implement-an-adorner.md)
|
||||
[Bind an Adorner to an Element](how-to-bind-an-adorner-to-an-element.md)
|
||||
[Adorn the Children of a Panel](how-to-adorn-the-children-of-a-panel.md)
|
||||
[Remove an Adorner from an Element](how-to-remove-an-adorner-from-an-element.md)
|
||||
[Remove all Adorners from an Element](how-to-remove-all-adorners-from-an-element.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.AdornedElementPlaceholder>
|
||||
|
||||
<xref:System.Windows.Documents.Adorner>
|
||||
|
||||
<xref:System.Windows.Documents.AdornerDecorator>
|
||||
|
||||
<xref:System.Windows.Media.AdornerHitTestResult>
|
||||
|
||||
<xref:System.Windows.Documents.AdornerLayer>
|
||||
|
||||
## Related Sections
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
title: "Adorners Overview"
|
||||
description: Learn about Windows Presentation Foundation Adorners, a special type of FrameworkElement that provides cues to a user, such as functional handles for elements.
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "adorners [WPF], about adorners"
|
||||
ms.assetid: 33d4c5c2-2daf-4e45-ba9a-5b673e2b8280
|
||||
---
|
||||
# Adorners Overview
|
||||
|
||||
Adorners are a special type of <xref:System.Windows.FrameworkElement>, used to provide visual cues to a user. Among other uses, Adorners can be used to add functional handles to elements or provide state information about a control.
|
||||
|
||||
## About Adorners
|
||||
|
||||
An <xref:System.Windows.Documents.Adorner> is a custom <xref:System.Windows.FrameworkElement> that is bound to a <xref:System.Windows.UIElement>. Adorners are rendered in an <xref:System.Windows.Documents.AdornerLayer>, which is a rendering surface that is always on top of the adorned element or a collection of adorned elements. Rendering of an adorner is independent from rendering of the <xref:System.Windows.UIElement> that the adorner is bound to. An adorner is typically positioned relative to the element to which it is bound, using the standard 2D coordinate origin located at the upper-left of the adorned element.
|
||||
|
||||
Common applications for adorners include:
|
||||
|
||||
- Adding functional handles to a <xref:System.Windows.UIElement> that enable a user to manipulate the element in some way (resize, rotate, reposition, etc.).
|
||||
- Provide visual feedback to indicate various states, or in response to various events.
|
||||
- Overlay visual decorations on a <xref:System.Windows.UIElement>.
|
||||
- Visually mask or override part or all of a <xref:System.Windows.UIElement>.
|
||||
|
||||
[!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] provides a basic framework for adorning visual elements. The following table lists the primary types used when adorning objects, and their purpose. Several usage examples follow:
|
||||
|
||||
|||
|
||||
|-|-|
|
||||
|<xref:System.Windows.Documents.Adorner>|An abstract base class from which all concrete adorner implementations inherit.|
|
||||
|<xref:System.Windows.Documents.AdornerLayer>|A class representing a rendering layer for the adorner(s) of one or more adorned elements.|
|
||||
|<xref:System.Windows.Documents.AdornerDecorator>|A class that enables an adorner layer to be associated with a collection of elements.|
|
||||
|
||||
## Implementing a Custom Adorner
|
||||
|
||||
The adorners framework provided by [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] is intended primarily to support the creation of custom adorners. A custom adorner is created by implementing a class that inherits from the abstract <xref:System.Windows.Documents.Adorner> class.
|
||||
|
||||
> [!NOTE]
|
||||
> The parent of an <xref:System.Windows.Documents.Adorner> is the <xref:System.Windows.Documents.AdornerLayer> that renders the <xref:System.Windows.Documents.Adorner>, not the element being adorned.
|
||||
|
||||
The following example shows a class that implements a simple adorner. The example adorner simply adorns the corners of a <xref:System.Windows.UIElement> with circles.
|
||||
|
||||
[!code-csharp[Adorners_SimpleCircleAdorner#_SimpleCircleAdornerBody](~/samples/snippets/csharp/VS_Snippets_Wpf/Adorners_SimpleCircleAdorner/CSharp/Window1.xaml.cs#_simplecircleadornerbody)]
|
||||
[!code-vb[Adorners_SimpleCircleAdorner#_SimpleCircleAdornerBody](~/samples/snippets/visualbasic/VS_Snippets_Wpf/Adorners_SimpleCircleAdorner/VisualBasic/Window1.xaml.vb#_simplecircleadornerbody)]
|
||||
|
||||
The following image shows the SimpleCircleAdorner applied to a <xref:System.Windows.Controls.TextBox>:
|
||||
|
||||

|
||||
|
||||
## Rendering Behavior for Adorners
|
||||
|
||||
It is important to note that adorners do not include any inherent rendering behavior; ensuring that an adorner renders is the responsibility of the adorner implementer. A common way of implementing rendering behavior is to override the <xref:System.Windows.UIElement.OnRender%2A> method and use one or more <xref:System.Windows.Media.DrawingContext> objects to render the adorner's visuals as needed (as shown in the example above).
|
||||
|
||||
> [!NOTE]
|
||||
> Anything placed in the adorner layer is rendered on top of the rest of any styles you have set. In other words, adorners are always visually on top and cannot be overridden using z-order.
|
||||
|
||||
## Events and Hit Testing
|
||||
|
||||
Adorners receive input events just like any other <xref:System.Windows.FrameworkElement>. Because an adorner always has a higher z-order than the element it adorns, the adorner receives input events (such as <xref:System.Windows.UIElement.Drop> or <xref:System.Windows.UIElement.MouseMove>) that may be intended for the underlying adorned element. An adorner can listen for certain input events and pass these on to the underlying adorned element by re-raising the event.
|
||||
|
||||
To enable pass-through hit testing of elements under an adorner, set the hit test <xref:System.Windows.UIElement.IsHitTestVisible%2A> property to **false** on the adorner. For more information about hit testing, see [Hit Testing in the Visual Layer](../graphics-multimedia/hit-testing-in-the-visual-layer.md).
|
||||
|
||||
## Adorning a Single UIElement
|
||||
|
||||
To bind an adorner to a particular <xref:System.Windows.UIElement>, follow these steps:
|
||||
|
||||
1. Call the static method <xref:System.Windows.Documents.AdornerLayer.GetAdornerLayer%2A> to get an <xref:System.Windows.Documents.AdornerLayer> object for the <xref:System.Windows.UIElement> to be adorned. <xref:System.Windows.Documents.AdornerLayer.GetAdornerLayer%2A> walks up the visual tree, starting at the specified <xref:System.Windows.UIElement>, and returns the first adorner layer it finds. (If no adorner layers are found, the method returns null.)
|
||||
|
||||
2. Call the <xref:System.Windows.Documents.AdornerLayer.Add%2A> method to bind the adorner to the target <xref:System.Windows.UIElement>.
|
||||
|
||||
The following example binds a SimpleCircleAdorner (shown above) to a <xref:System.Windows.Controls.TextBox> named *myTextBox*:
|
||||
|
||||
[!code-csharp[Adorners_SimpleCircleAdorner#_AdornSingleElement](~/samples/snippets/csharp/VS_Snippets_Wpf/Adorners_SimpleCircleAdorner/CSharp/Window1.xaml.cs#_adornsingleelement)]
|
||||
[!code-vb[Adorners_SimpleCircleAdorner#_AdornSingleElement](~/samples/snippets/visualbasic/VS_Snippets_Wpf/Adorners_SimpleCircleAdorner/VisualBasic/Window1.xaml.vb#_adornsingleelement)]
|
||||
|
||||
> [!NOTE]
|
||||
> Using [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] to bind an adorner to another element is currently not supported.
|
||||
|
||||
## Adorning the Children of a Panel
|
||||
|
||||
To bind an adorner to the children of a <xref:System.Windows.Controls.Panel>, follow these steps:
|
||||
|
||||
1. Call the `static` method <xref:System.Windows.Documents.AdornerLayer.GetAdornerLayer%2A> to find an adorner layer for the element whose children are to be adorned.
|
||||
|
||||
2. Enumerate through the children of the parent element and call the <xref:System.Windows.Documents.AdornerLayer.Add%2A> method to bind an adorner to each child element.
|
||||
|
||||
The following example binds a SimpleCircleAdorner (shown above) to the children of a <xref:System.Windows.Controls.StackPanel> named *myStackPanel*:
|
||||
|
||||
[!code-csharp[Adorners_SimpleCircleAdorner#_AdornChildren](~/samples/snippets/csharp/VS_Snippets_Wpf/Adorners_SimpleCircleAdorner/CSharp/Window1.xaml.cs#_adornchildren)]
|
||||
[!code-vb[Adorners_SimpleCircleAdorner#_AdornChildren](~/samples/snippets/visualbasic/VS_Snippets_Wpf/Adorners_SimpleCircleAdorner/VisualBasic/Window1.xaml.vb#_adornchildren)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Media.AdornerHitTestResult>
|
||||
- [Shapes and Basic Drawing in WPF Overview](../graphics-multimedia/shapes-and-basic-drawing-in-wpf-overview.md)
|
||||
- [Painting with Images, Drawings, and Visuals](../graphics-multimedia/painting-with-images-drawings-and-visuals.md)
|
||||
- [Drawing Objects Overview](../graphics-multimedia/drawing-objects-overview.md)
|
||||
- [How-to Topics](adorners-how-to-topics.md)
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: "Adorners"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "adorners [WPF]"
|
||||
ms.assetid: 5d5f656b-8e05-4839-9d53-b0324d902aa9
|
||||
---
|
||||
# Adorners
|
||||
This section provides information about Adorners and the [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] Adorner framework.
|
||||
|
||||
## In This Section
|
||||
[Adorners Overview](adorners-overview.md)
|
||||
[How-to Topics](adorners-how-to-topics.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.AdornedElementPlaceholder>
|
||||
|
||||
<xref:System.Windows.Documents.Adorner>
|
||||
|
||||
<xref:System.Windows.Documents.AdornerDecorator>
|
||||
|
||||
<xref:System.Windows.Media.AdornerHitTestResult>
|
||||
|
||||
<xref:System.Windows.Documents.AdornerLayer>
|
||||
|
||||
## Related Sections
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: "Border"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "borders [WPF]"
|
||||
- "controls [WPF], Border"
|
||||
- "Border control [WPF]"
|
||||
ms.assetid: 51739f83-b5a2-489b-854b-30607e74a502
|
||||
---
|
||||
# Border
|
||||
The following sample demonstrates how to dynamically change properties of the <xref:System.Windows.Controls.Border> element.
|
||||
|
||||
## In This Section
|
||||
[Animate a BorderThickness Value](how-to-animate-a-borderthickness-value.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.Decorator>
|
||||
|
||||
<xref:System.Windows.Controls.Border>
|
||||
|
||||
## Related Sections
|
||||
[Panels Overview](panels-overview.md)
|
||||
|
||||
[Alignment, Margins, and Padding Overview](../advanced/alignment-margins-and-padding-overview.md)
|
||||
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "BulletDecorator"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], BulletDecorator"
|
||||
- "BulletDecorator control [WPF]"
|
||||
ms.assetid: 1756cabf-59b4-47a7-883d-1bdf2e5abe00
|
||||
---
|
||||
# BulletDecorator
|
||||
<xref:System.Windows.Controls.Primitives.BulletDecorator> has two content properties: <xref:System.Windows.Controls.Primitives.BulletDecorator.Bullet%2A> and <xref:System.Windows.Controls.Decorator.Child%2A>. The <xref:System.Windows.Controls.Primitives.BulletDecorator.Bullet%2A> property defines the <xref:System.Windows.UIElement> to use as a bullet. The <xref:System.Windows.Controls.Decorator.Child%2A> property defines a <xref:System.Windows.UIElement> that visually aligns with the bullet.
|
||||
|
||||
The following illustration shows examples of controls that use a <xref:System.Windows.Controls.Primitives.BulletDecorator>.
|
||||
|
||||

|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.Primitives.BulletDecorator>
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: "Button Styles and Templates"
|
||||
description: Learn about styles and templates for the Windows Presentation Foundation Button control. Modify the ControlTemplate to give the control a unique appearance.
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "states [WPF], Button"
|
||||
- "parts [WPF], Button"
|
||||
- "styles [WPF], Button"
|
||||
- "Button [WPF], styles and templates"
|
||||
- "templates [WPF], Button"
|
||||
- "ControlTemplate [WPF], Button"
|
||||
ms.assetid: e223c759-f8c4-4717-acfb-b1e40bdf5f3b
|
||||
---
|
||||
# Button Styles and Templates
|
||||
This topic describes the styles and templates for the <xref:System.Windows.Controls.Button> control. You can modify the default <xref:System.Windows.Controls.ControlTemplate> to give the control a unique appearance. For more information, see [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template).
|
||||
|
||||
## Button Parts
|
||||
The <xref:System.Windows.Controls.Button> control does not have any named parts.
|
||||
|
||||
## Button States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.Button> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Normal|CommonStates|The default state.|
|
||||
|MouseOver|CommonStates|The mouse pointer is positioned over the control.|
|
||||
|Pressed|CommonStates|The control is pressed.|
|
||||
|Disabled|CommonStates|The control is disabled.|
|
||||
|Focused|FocusStates|The control has focus.|
|
||||
|Unfocused|FocusStates|The control does not have focus.|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` and the control has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` and the control does not have focus.|
|
||||
|
||||
## Button ControlTemplate Example
|
||||
The following example shows how to define a <xref:System.Windows.Controls.ControlTemplate> for the <xref:System.Windows.Controls.Button> control.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#Button](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/button.xaml#button)]
|
||||
|
||||
The preceding example uses one or more of the following resources.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#Resources](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/shared.xaml#resources)]
|
||||
|
||||
For the complete sample, see [Styling with ControlTemplates Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Styles%20&%20Templates/IntroToStylingAndTemplating).
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.FrameworkElement.Style%2A>
|
||||
- <xref:System.Windows.Controls.ControlTemplate>
|
||||
- [Control Styles and Templates](control-styles-and-templates.md)
|
||||
- [Control Customization](control-customization.md)
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
- [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template)
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
title: "Button"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], Button"
|
||||
- "Button control [WPF]"
|
||||
ms.assetid: a9d8f5a5-c98c-463e-808a-5a4e63173098
|
||||
---
|
||||
# Button
|
||||
A <xref:System.Windows.Controls.Button> control reacts to user input from a mouse, keyboard, stylus, or other input device and raises a <xref:System.Windows.Controls.Primitives.ButtonBase.Click> event. A <xref:System.Windows.Controls.Button> is a basic [!INCLUDE[TLA#tla_ui](../../../includes/tlasharptla-ui-md.md)] component that can contain simple content, such as text, and can also contain complex content, such as images and <xref:System.Windows.Controls.Panel> controls.
|
||||
|
||||

|
||||
|
||||
## In This Section
|
||||
[Create a Button That Has an Image](how-to-create-a-button-that-has-an-image.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.Button>
|
||||
<xref:System.Windows.Controls.Primitives.ButtonBase>
|
||||
<xref:System.Windows.Controls.RadioButton>
|
||||
<xref:System.Windows.Controls.Primitives.RepeatButton>
|
||||
@@ -0,0 +1,131 @@
|
||||
---
|
||||
title: "Calendar Styles and Templates"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "styles [WPF], Calendar"
|
||||
- "templates [WPF], Calendar"
|
||||
- "states [WPF], Calendar"
|
||||
- "parts [WPF], Calendar"
|
||||
- "Calendar [WPF], styles and templates"
|
||||
- "ControlTemplate [WPF], Calendar"
|
||||
ms.assetid: f4fcf046-7a8f-41b8-b5a8-534b64e0345c
|
||||
---
|
||||
# Calendar Styles and Templates
|
||||
This topic describes the styles and templates for the <xref:System.Windows.Controls.Calendar> control. You can modify the default <xref:System.Windows.Controls.ControlTemplate> to give the control a unique appearance. For more information, see [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template).
|
||||
|
||||
## Calendar Parts
|
||||
The following table lists the named parts for the <xref:System.Windows.Controls.Calendar> control.
|
||||
|
||||
|Part|Type|Description|
|
||||
|-|-|-|
|
||||
|PART_CalendarItem|<xref:System.Windows.Controls.Primitives.CalendarItem>|The currently displayed month or year on the <xref:System.Windows.Controls.Calendar>.|
|
||||
|PART_Root|<xref:System.Windows.Controls.Panel>|The panel that contains the <xref:System.Windows.Controls.Primitives.CalendarItem>.|
|
||||
|
||||
## Calendar States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.Calendar> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|----------------------|---------------------------|-----------------|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control does not have focus.|
|
||||
|
||||
## CalendarItem Parts
|
||||
The following table lists the named parts for the <xref:System.Windows.Controls.Primitives.CalendarItem> control.
|
||||
|
||||
|Part|Type|Description|
|
||||
|-|-|-|
|
||||
|PART_Root|<xref:System.Windows.FrameworkElement>|The root of the control.|
|
||||
|PART_PreviousButton|<xref:System.Windows.Controls.Button>|The button that displays the previous page of the calendar when it is clicked.|
|
||||
|PART_NextButton|<xref:System.Windows.Controls.Button>|The button that displays the next page of the calendar when it is clicked.|
|
||||
|PART_HeaderButton|<xref:System.Windows.Controls.Button>|The button that allows switching between month mode, year mode, and decade mode.|
|
||||
|PART_MonthView|<xref:System.Windows.Controls.Grid>|Hosts the content when in month mode.|
|
||||
|PART_YearView|<xref:System.Windows.Controls.Grid>|Hosts the content when in year or decade mode.|
|
||||
|PART_DisabledVisual|<xref:System.Windows.FrameworkElement>|The overlay for the disabled state.|
|
||||
|DayTitleTemplate|<xref:System.Windows.DataTemplate>|The <xref:System.Windows.DataTemplate> that describes the visual structure.|
|
||||
|
||||
## CalendarItem States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.Primitives.CalendarItem> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Normal State|CommonStates|The default state.|
|
||||
|Disabled State|CommonStates|The state of the calendar when the <xref:System.Windows.UIElement.IsEnabled%2A> property is `false`.|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control does not have focus.|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control does not have focus.|
|
||||
|
||||
## CalendarDayButton Parts
|
||||
The <xref:System.Windows.Controls.Primitives.CalendarDayButton> control does not have any named parts.
|
||||
|
||||
## CalendarDayButton States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.Primitives.CalendarDayButton> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Normal|CommonStates|The default state.|
|
||||
|Disabled|CommonStates|The <xref:System.Windows.Controls.Primitives.CalendarDayButton> is disabled.|
|
||||
|MouseOver|CommonStates|The mouse pointer is positioned over the <xref:System.Windows.Controls.Primitives.CalendarDayButton>.|
|
||||
|Pressed|CommonStates|The <xref:System.Windows.Controls.Primitives.CalendarDayButton> is pressed.|
|
||||
|Selected|SelectionStates|The button is selected.|
|
||||
|Unselected|SelectionStates|The button is not selected.|
|
||||
|CalendarButtonFocused|CalendarButtonFocusStates|The button has focus.|
|
||||
|CalendarButtonUnfocused|CalendarButtonFocusStates|The button does not have focus.|
|
||||
|Focused|FocusStates|The button has focus.|
|
||||
|Unfocused|FocusStates|The button does not have focus.|
|
||||
|Active|ActiveStates|The button is active.|
|
||||
|Inactive|ActiveStates|The button is inactive.|
|
||||
|RegularDay|DayStates|The button does not represent <xref:System.DateTime.Today%2A?displayProperty=nameWithType>.|
|
||||
|Today|DayStates|The button represents <xref:System.DateTime.Today%2A?displayProperty=nameWithType>.|
|
||||
|NormalDay|BlackoutDayStates|The button represents a day that can be selected.|
|
||||
|BlackoutDay|BlackoutDayStates|The button represents a day that cannot be selected.|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control does not have focus.|
|
||||
|
||||
## CalendarButton Parts
|
||||
The <xref:System.Windows.Controls.Primitives.CalendarButton> control does not have any named parts.
|
||||
|
||||
## CalendarButton States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.Primitives.CalendarButton> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Normal|CommonStates|The default state.|
|
||||
|Disabled|CommonStates|The <xref:System.Windows.Controls.Primitives.CalendarButton> is disabled.|
|
||||
|MouseOver|CommonStates|The mouse pointer is positioned over the <xref:System.Windows.Controls.Primitives.CalendarButton>.|
|
||||
|Pressed|CommonStates|The <xref:System.Windows.Controls.Primitives.CalendarButton> is pressed.|
|
||||
|Selected|SelectionStates|The button is selected.|
|
||||
|Unselected|SelectionStates|The button is not selected.|
|
||||
|CalendarButtonFocused|CalendarButtonFocusStates|The button has focus.|
|
||||
|CalendarButtonUnfocused|CalendarButtonFocusStates|The button does not have focus.|
|
||||
|Focused|FocusStates|The button has focus.|
|
||||
|Unfocused|FocusStates|The button does not have focus.|
|
||||
|Active|ActiveStates|The button is active.|
|
||||
|Inactive|ActiveStates|The button is inactive.|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control does not have focus.|
|
||||
|
||||
## Calendar ControlTemplate Example
|
||||
The following example shows how to define a <xref:System.Windows.Controls.ControlTemplate> for the <xref:System.Windows.Controls.Calendar> control and associated types.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#Calendar](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/calendar.xaml#calendar)]
|
||||
|
||||
The preceding example uses one or more of the following resources.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#Resources](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/shared.xaml#resources)]
|
||||
|
||||
For the complete sample, see [Styling with ControlTemplates Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Styles%20&%20Templates/IntroToStylingAndTemplating).
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.FrameworkElement.Style%2A>
|
||||
- <xref:System.Windows.Controls.ControlTemplate>
|
||||
- [Control Styles and Templates](control-styles-and-templates.md)
|
||||
- [Control Customization](control-customization.md)
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
- [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template)
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: "Calendar"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], Calendar"
|
||||
- "Calendar control [WPF]"
|
||||
ms.assetid: ee844e4a-eefe-48e2-bd0d-1d82cc5e960b
|
||||
---
|
||||
# Calendar
|
||||
A calendar enables a user to select a date by using a visual calendar display.
|
||||
|
||||
A <xref:System.Windows.Controls.Calendar> control can be used on its own, or as a drop-down part of a <xref:System.Windows.Controls.DatePicker> control. For more information, see <xref:System.Windows.Controls.DatePicker>.
|
||||
|
||||
The following illustration shows two <xref:System.Windows.Controls.Calendar> controls, one with selections and blackout dates and one without.
|
||||
|
||||

|
||||
Calendar controls
|
||||
|
||||
The following table provides information about tasks that are typically associated with the <xref:System.Windows.Controls.Calendar>.
|
||||
|
||||
|Task|Implementation|
|
||||
|----------|--------------------|
|
||||
|Specify dates that cannot be selected.|Use the <xref:System.Windows.Controls.Calendar.BlackoutDates%2A> property.|
|
||||
|Have the <xref:System.Windows.Controls.Calendar> display a month, an entire year, or a decade.|Set the <xref:System.Windows.Controls.Calendar.DisplayMode%2A> property to Month, Year, or Decade.|
|
||||
|Specify whether the user can select a date, a range of dates, or multiple ranges of dates.|Use the <xref:System.Windows.Controls.Calendar.SelectionMode%2A>.|
|
||||
|Specify the range of dates that the <xref:System.Windows.Controls.Calendar> displays.|Use the <xref:System.Windows.Controls.Calendar.DisplayDateStart%2A> and <xref:System.Windows.Controls.Calendar.DisplayDateEnd%2A> properties.|
|
||||
|Specify whether the current date is highlighted.|Use the <xref:System.Windows.Controls.Calendar.IsTodayHighlighted%2A> property. By default, <xref:System.Windows.Controls.Calendar.IsTodayHighlighted%2A> is `true`.|
|
||||
|Change the size of the <xref:System.Windows.Controls.Calendar>.|Use a <xref:System.Windows.Controls.Viewbox> or set the <xref:System.Windows.FrameworkElement.LayoutTransform%2A> property to a <xref:System.Windows.Media.ScaleTransform>. Note that if you set the <xref:System.Windows.FrameworkElement.Width%2A> and <xref:System.Windows.FrameworkElement.Height%2A> properties of a <xref:System.Windows.Controls.Calendar>, the actual calendar does not change its size.|
|
||||
|
||||
The <xref:System.Windows.Controls.Calendar> control provides basic navigation using either the mouse or keyboard. The following table summarizes keyboard navigation.
|
||||
|
||||
|Key Combination|<xref:System.Windows.Controls.Calendar.DisplayMode%2A>|Action|
|
||||
|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|------------|
|
||||
|ARROW|<xref:System.Windows.Controls.CalendarMode.Month>|Changes the <xref:System.Windows.Controls.Calendar.SelectedDate%2A> property if the <xref:System.Windows.Controls.Calendar.SelectionMode%2A> property is not set to <xref:System.Windows.Controls.CalendarSelectionMode.None>.|
|
||||
|ARROW|<xref:System.Windows.Controls.CalendarMode.Year>|Changes the month of the <xref:System.Windows.Controls.Calendar.DisplayDate%2A> property. Note that the <xref:System.Windows.Controls.Calendar.SelectedDate%2A> does not change.|
|
||||
|ARROW|<xref:System.Windows.Controls.CalendarMode.Decade>|Changes the year of the <xref:System.Windows.Controls.Calendar.DisplayDate%2A>. Note that the <xref:System.Windows.Controls.Calendar.SelectedDate%2A> does not change.|
|
||||
|SHIFT+ARROW|<xref:System.Windows.Controls.CalendarMode.Month>|If <xref:System.Windows.Controls.Calendar.SelectionMode%2A> is not set to <xref:System.Windows.Controls.CalendarSelectionMode.SingleDate> or <xref:System.Windows.Controls.CalendarSelectionMode.None>, extends the range of selected dates.|
|
||||
|HOME|<xref:System.Windows.Controls.CalendarMode.Month>|Changes the <xref:System.Windows.Controls.Calendar.SelectedDate%2A> to the first day of the current month.|
|
||||
|HOME|<xref:System.Windows.Controls.CalendarMode.Year>|Changes the month of the <xref:System.Windows.Controls.Calendar.DisplayDate%2A> to the first month of the year. The <xref:System.Windows.Controls.Calendar.SelectedDate%2A> does not change.|
|
||||
|HOME|<xref:System.Windows.Controls.CalendarMode.Decade>|Changes the year of the <xref:System.Windows.Controls.Calendar.DisplayDate%2A> to the first year of the decade. The <xref:System.Windows.Controls.Calendar.SelectedDate%2A> does not change.|
|
||||
|END|<xref:System.Windows.Controls.CalendarMode.Month>|Changes the <xref:System.Windows.Controls.Calendar.SelectedDate%2A> to the last day of the current month.|
|
||||
|END|<xref:System.Windows.Controls.CalendarMode.Year>|Changes the month of the <xref:System.Windows.Controls.Calendar.DisplayDate%2A> to the last month of the year. The <xref:System.Windows.Controls.Calendar.SelectedDate%2A> does not change.|
|
||||
|END|<xref:System.Windows.Controls.CalendarMode.Decade>|Changes the year of the <xref:System.Windows.Controls.Calendar.DisplayDate%2A> to the last year of the decade. The <xref:System.Windows.Controls.Calendar.SelectedDate%2A> does not change.|
|
||||
|CTRL+UP ARROW|Any|Switches to the next larger <xref:System.Windows.Controls.Calendar.DisplayMode%2A>. If <xref:System.Windows.Controls.Calendar.DisplayMode%2A> is already <xref:System.Windows.Controls.CalendarMode.Decade>, no action.|
|
||||
|CTRL+DOWN ARROW|Any|Switches to the next smaller <xref:System.Windows.Controls.Calendar.DisplayMode%2A>. If <xref:System.Windows.Controls.Calendar.DisplayMode%2A> is already <xref:System.Windows.Controls.CalendarMode.Month>, no action.|
|
||||
|SPACEBAR or ENTER|<xref:System.Windows.Controls.CalendarMode.Year> or <xref:System.Windows.Controls.CalendarMode.Decade>|Switches <xref:System.Windows.Controls.Calendar.DisplayMode%2A> to the <xref:System.Windows.Controls.CalendarMode.Month> or <xref:System.Windows.Controls.CalendarMode.Year> represented by focused item.|
|
||||
|
||||
## See also
|
||||
|
||||
- [Controls](index.md)
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: "Canvas How-to Topics"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], Canvas"
|
||||
- "Canvas control [WPF], how-to topics"
|
||||
ms.assetid: 5c8f5bca-7ba9-4526-a9bf-0852351dbe8a
|
||||
---
|
||||
# Canvas How-to Topics
|
||||
The topics in this section describe how to use the <xref:System.Windows.Controls.Canvas> element to absolutely position child elements.
|
||||
|
||||
## In This Section
|
||||
[Wrap a Border Around the Content of a Canvas](how-to-wrap-a-border-around-the-content-of-a-canvas.md)
|
||||
[Get or Set Canvas Positioning Properties](how-to-get-or-set-canvas-positioning-properties.md)
|
||||
[Create and Use a Canvas](how-to-create-and-use-a-canvas.md)
|
||||
[Use the Attached Properties of Canvas to Position Child Elements](how-to-use-the-attached-properties-of-canvas-to-position-child-elements.md)
|
||||
[Resize a Canvas by Using a Thumb](how-to-resize-a-canvas-by-using-a-thumb.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.Panel>
|
||||
|
||||
<xref:System.Windows.Controls.Canvas>
|
||||
|
||||
<xref:System.Windows.Controls.DockPanel>
|
||||
|
||||
<xref:System.Windows.Controls.Grid>
|
||||
|
||||
<xref:System.Windows.Controls.StackPanel>
|
||||
|
||||
<xref:System.Windows.Controls.VirtualizingStackPanel>
|
||||
|
||||
<xref:System.Windows.Controls.WrapPanel>
|
||||
|
||||
## Related Sections
|
||||
[Layout](../advanced/layout.md)
|
||||
|
||||
[Walkthrough: My first WPF desktop application](../getting-started/walkthrough-my-first-wpf-desktop-application.md)
|
||||
|
||||
[ScrollViewer Overview](scrollviewer-overview.md)
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: "Canvas"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "layout [WPF], Canvas control"
|
||||
- "controls [WPF], Canvas"
|
||||
- "Canvas control [WPF]"
|
||||
ms.assetid: fdb390e9-1bba-4b5f-87fe-c3bc246fa7e9
|
||||
---
|
||||
# Canvas
|
||||
<xref:System.Windows.Controls.Canvas> is a layout control that enables absolute positioning of child elements.
|
||||
|
||||
## In This Section
|
||||
[How-to Topics](canvas-how-to-topics.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.Panel>
|
||||
|
||||
<xref:System.Windows.Controls.Canvas>
|
||||
|
||||
<xref:System.Windows.Controls.DockPanel>
|
||||
|
||||
<xref:System.Windows.Controls.Grid>
|
||||
|
||||
<xref:System.Windows.Controls.StackPanel>
|
||||
|
||||
<xref:System.Windows.Controls.VirtualizingStackPanel>
|
||||
|
||||
<xref:System.Windows.Controls.WrapPanel>
|
||||
|
||||
## Related Sections
|
||||
[Layout](../advanced/layout.md)
|
||||
|
||||
[Walkthrough: My first WPF desktop application](../getting-started/walkthrough-my-first-wpf-desktop-application.md)
|
||||
|
||||
[ScrollViewer Overview](scrollviewer-overview.md)
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
---
|
||||
title: "Change Selection in a RichTextBox Programmatically"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "changing selections in a text box [WPF]"
|
||||
- "changing selections in a RichTextBox [WPF]"
|
||||
ms.assetid: f1213205-1ad7-4cd2-b115-460173cc5aa3
|
||||
---
|
||||
# Change Selection in a RichTextBox Programmatically
|
||||
This example shows how to programmatically change the current selection in a <xref:System.Windows.Controls.RichTextBox>. This selection is the same as if the user had selected the content by using the user interface.
|
||||
|
||||
## Example
|
||||
The following [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] code describes a named <xref:System.Windows.Controls.RichTextBox> control with simple content.
|
||||
|
||||
[!code-xaml[RichTextBoxMiscSnippets_snip#ChangeSelectionProgrammaticalyExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/RichTextBoxMiscSnippets_snip/CSharp/ChangeSelectionProgrammaticaly.xaml#changeselectionprogrammaticalyexamplewholepage)]
|
||||
|
||||
## Example
|
||||
The following code programmatically selects some arbitrary text when the user clicks inside the <xref:System.Windows.Controls.RichTextBox>.
|
||||
|
||||
[!code-csharp[RichTextBoxMiscSnippets_snip#ChangeSelectionProgrammaticalyCodeExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/RichTextBoxMiscSnippets_snip/CSharp/ChangeSelectionProgrammaticaly.xaml.cs#changeselectionprogrammaticalycodeexamplewholepage)]
|
||||
[!code-vb[RichTextBoxMiscSnippets_snip#ChangeSelectionProgrammaticalyCodeExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/RichTextBoxMiscSnippets_snip/VisualBasic/ChangeSelectionProgrammaticaly.xaml.vb#changeselectionprogrammaticalycodeexamplewholepage)]
|
||||
|
||||
## See also
|
||||
|
||||
- [RichTextBox Overview](richtextbox-overview.md)
|
||||
- [TextBox Overview](textbox-overview.md)
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
title: "CheckBox Styles and Templates"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "states [WPF], CheckBox"
|
||||
- "templates [WPF], CheckBox"
|
||||
- "parts [WPF], CheckBox"
|
||||
- "ControlTemplate [WPF], CheckBox"
|
||||
- "CheckBox [WPF], styles and templates"
|
||||
- "styles [WPF], CheckBox"
|
||||
ms.assetid: bfdaec96-d101-4d3d-864d-c27e6b621d03
|
||||
---
|
||||
# CheckBox Styles and Templates
|
||||
This topic describes the styles and templates for the <xref:System.Windows.Controls.CheckBox> control. You can modify the default <xref:System.Windows.Controls.ControlTemplate> to give the control a unique appearance. For more information, see [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template).
|
||||
|
||||
## CheckBox Parts
|
||||
The <xref:System.Windows.Controls.CheckBox> control does not have any named parts.
|
||||
|
||||
## CheckBox States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.CheckBox> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|----------------------|---------------------------|-----------------|
|
||||
|Normal|CommonStates|The default state.|
|
||||
|MouseOver|CommonStates|The mouse pointer is positioned over the control.|
|
||||
|Pressed|CommonStates|The control is pressed.|
|
||||
|Disabled|CommonStates|The control is disabled.|
|
||||
|Focused|FocusStates|The control has focus.|
|
||||
|Unfocused|FocusStates|The control does not have focus.|
|
||||
|Checked|CheckStates|<xref:System.Windows.Controls.Primitives.ToggleButton.IsChecked%2A> is `true`.|
|
||||
|Unchecked|CheckStates|<xref:System.Windows.Controls.Primitives.ToggleButton.IsChecked%2A> is `false`.|
|
||||
|Indeterminate|CheckStates|<xref:System.Windows.Controls.Primitives.ToggleButton.IsThreeState%2A> is `true`, and <xref:System.Windows.Controls.Primitives.ToggleButton.IsChecked%2A> is `null`.|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control has focus.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control does not have focus.|
|
||||
|
||||
## CheckBox ControlTemplate Example
|
||||
The following example shows how to define a <xref:System.Windows.Controls.ControlTemplate> for the <xref:System.Windows.Controls.CheckBox> control.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#CheckBox](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/checkbox.xaml#checkbox)]
|
||||
|
||||
The preceding example uses one or more of the following resources.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#Resources](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/shared.xaml#resources)]
|
||||
|
||||
For the complete sample, see [Styling with ControlTemplates Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Styles%20&%20Templates/IntroToStylingAndTemplating).
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.FrameworkElement.Style%2A>
|
||||
- <xref:System.Windows.Controls.ControlTemplate>
|
||||
- [Control Styles and Templates](control-styles-and-templates.md)
|
||||
- [Control Customization](control-customization.md)
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
- [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template)
|
||||
@@ -0,0 +1,25 @@
|
||||
---
|
||||
title: "CheckBox"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], CheckBox"
|
||||
- "CheckBox control [WPF]"
|
||||
ms.assetid: ee701cc2-968b-4683-8f81-3fafd8542700
|
||||
---
|
||||
# CheckBox
|
||||
You can use a <xref:System.Windows.Controls.CheckBox> in the [!INCLUDE[TLA#tla_ui](../../../includes/tlasharptla-ui-md.md)] of your application to represent options that a user can select or clear. You can use a single check box or you can group two or more check boxes.
|
||||
|
||||
The following graphic shows the different states of a <xref:System.Windows.Controls.CheckBox>.
|
||||
|
||||

|
||||
CheckBox controls in different states
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.CheckBox>
|
||||
<xref:System.Windows.Controls.RadioButton>
|
||||
<xref:System.Windows.Controls.Primitives.ButtonBase>
|
||||
<xref:System.Windows.Controls.Primitives.RepeatButton>
|
||||
|
||||
## Related Sections
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
title: "ComboBox Styles and Templates"
|
||||
description: Learn about styles and templates for the Windows Presentation Foundation ComboBox control. Modify the ControlTemplate to give the control a unique appearance.
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "ComboBox [WPF], styles and templates"
|
||||
- "states [WPF], ComboBox"
|
||||
- "ControlTemplate [WPF], ComboBox"
|
||||
- "styles [WPF], ComboBox"
|
||||
- "templates [WPF], ComboBox"
|
||||
- "parts [WPF], ComboBox"
|
||||
ms.assetid: b0662fa1-16d7-4320-b26b-c1804e565a44
|
||||
---
|
||||
# ComboBox Styles and Templates
|
||||
This topic describes the styles and templates for the <xref:System.Windows.Controls.ComboBox> control. You can modify the default <xref:System.Windows.Controls.ControlTemplate> to give the control a unique appearance. For more information, see [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template).
|
||||
|
||||
## ComboBox Parts
|
||||
The following table lists the named parts for the <xref:System.Windows.Controls.ComboBox> control.
|
||||
|
||||
|Part|Type|Description|
|
||||
|-|-|-|
|
||||
|PART_EditableTextBox|<xref:System.Windows.Controls.TextBox>|Contains the text of the <xref:System.Windows.Controls.ComboBox>.|
|
||||
|PART_Popup|<xref:System.Windows.Controls.Primitives.Popup>|The drop-down that contains the items in the combo box.|
|
||||
|
||||
When you create a <xref:System.Windows.Controls.ControlTemplate> for a <xref:System.Windows.Controls.ComboBox>, your template might contain an <xref:System.Windows.Controls.ItemsPresenter> within a <xref:System.Windows.Controls.ScrollViewer>. (The <xref:System.Windows.Controls.ItemsPresenter> displays each item in the <xref:System.Windows.Controls.ComboBox>; the <xref:System.Windows.Controls.ScrollViewer> enables scrolling within the control). If the <xref:System.Windows.Controls.ItemsPresenter> is not the direct child of the <xref:System.Windows.Controls.ScrollViewer>, you must give the <xref:System.Windows.Controls.ItemsPresenter> the name, `ItemsPresenter`.
|
||||
|
||||
## ComboBox States
|
||||
The following table lists the states for the <xref:System.Windows.Controls.ComboBox> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Normal|CommonStates|The default state.|
|
||||
|Disabled|CommonStates|The control is disabled.|
|
||||
|MouseOver|CommonStates|The mouse pointer is over the <xref:System.Windows.Controls.ComboBox> control.|
|
||||
|Focused|FocusStates|The control has focus.|
|
||||
|Unfocused|FocusStates|The control does not have focus.|
|
||||
|FocusedDropDown|FocusStates|The drop-down for the <xref:System.Windows.Controls.ComboBox> has focus.|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` and the control has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` and the control does not have focus.|
|
||||
|Editable|EditStates|The <xref:System.Windows.Controls.ComboBox.IsEditable%2A> property is `true`.|
|
||||
|Uneditable|EditStates|The <xref:System.Windows.Controls.ComboBox.IsEditable%2A> property is `false`.|
|
||||
|
||||
## ComboBoxItem Parts
|
||||
The <xref:System.Windows.Controls.ComboBoxItem> control does not have any named parts.
|
||||
|
||||
## ComboBoxItem States
|
||||
The following table lists the states for the <xref:System.Windows.Controls.ComboBoxItem> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Normal|CommonStates|The default state.|
|
||||
|Disabled|CommonStates|The control is disabled.|
|
||||
|MouseOver|CommonStates|The mouse pointer is over the <xref:System.Windows.Controls.ComboBoxItem> control.|
|
||||
|Focused|FocusStates|The control has focus.|
|
||||
|Unfocused|FocusStates|The control does not have focus.|
|
||||
|Selected|SelectionStates|The item is currently selected.|
|
||||
|Unselected|SelectionStates|The item is not selected.|
|
||||
|SelectedUnfocused|SelectionStates|The item is selected, but does not have focus.|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` and the control has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` and the control does not have focus.|
|
||||
|
||||
## ComboBox ControlTemplate Example
|
||||
The following example shows how to define a <xref:System.Windows.Controls.ControlTemplate> for the <xref:System.Windows.Controls.ComboBox> control and associated types.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#ComboBox](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/combobox.xaml#combobox)]
|
||||
|
||||
The preceding example uses one or more of the following resources.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#Resources](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/shared.xaml#resources)]
|
||||
|
||||
For the complete sample, see [Styling with ControlTemplates Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Styles%20&%20Templates/IntroToStylingAndTemplating).
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.FrameworkElement.Style%2A>
|
||||
- <xref:System.Windows.Controls.ControlTemplate>
|
||||
- [Control Styles and Templates](control-styles-and-templates.md)
|
||||
- [Control Customization](control-customization.md)
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
- [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template)
|
||||
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: "ComboBox"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], ComboBox"
|
||||
- "ComboBox control [WPF]"
|
||||
ms.assetid: fe0c2f62-fec2-4c41-a37e-5773d284170c
|
||||
---
|
||||
# ComboBox
|
||||
The <xref:System.Windows.Controls.ComboBox> control presents users with a list of options. The list is shown and hidden as the control expands and collapses. In its default state, the list is collapsed, displaying only one choice. The user clicks a button to see the complete list of options.
|
||||
|
||||
The following illustration shows a <xref:System.Windows.Controls.ComboBox> in different states.
|
||||
|
||||

|
||||
Collapsed and expanded
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.ComboBox>
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
title: "ContextMenu Overview"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], ContextMenu"
|
||||
- "ContextMenu controls [WPF], about ContextMenu controls"
|
||||
ms.assetid: 16909c42-799a-4561-91e0-7d69dcfeea91
|
||||
---
|
||||
# ContextMenu Overview
|
||||
The <xref:System.Windows.Controls.ContextMenu> class represents the element that exposes functionality by using a context-specific <xref:System.Windows.Controls.Menu>. Typically, a user exposes the <xref:System.Windows.Controls.ContextMenu> in the [!INCLUDE[TLA#tla_ui](../../../includes/tlasharptla-ui-md.md)] by right-clicking the mouse button. This topic introduces the <xref:System.Windows.Controls.ContextMenu> element and provides examples of how to use it in [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] and code.
|
||||
|
||||
<a name="contextmenu_control"></a>
|
||||
## ContextMenu Control
|
||||
A <xref:System.Windows.Controls.ContextMenu> is attached to a specific control. The <xref:System.Windows.Controls.ContextMenu> element enables you to present users with a list of items that specify commands or options that are associated with a particular control, for example, a <xref:System.Windows.Controls.Button>. Users right-click the control to make the menu appear. Typically, clicking a <xref:System.Windows.Controls.MenuItem> opens a submenu or causes an application to carry out a command.
|
||||
|
||||
<a name="creating_contextmenus"></a>
|
||||
## Creating ContextMenus
|
||||
The following examples show how to create a <xref:System.Windows.Controls.ContextMenu> with submenus. The <xref:System.Windows.Controls.ContextMenu> controls are attached to button controls.
|
||||
|
||||
[!code-xaml[ContextMenu#1](~/samples/snippets/csharp/VS_Snippets_Wpf/ContextMenu/CSharp/Pane1.xaml#1)]
|
||||
|
||||
[!code-csharp[ContextMenu#2](~/samples/snippets/csharp/VS_Snippets_Wpf/ContextMenu/CSharp/Pane1.xaml.cs#2)]
|
||||
[!code-vb[ContextMenu#2](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ContextMenu/VisualBasic/Pane1.xaml.vb#2)]
|
||||
|
||||
<a name="applying_styles_to_contextmenu"></a>
|
||||
## Applying Styles to a ContextMenu
|
||||
By using a control <xref:System.Windows.Style>, you can dramatically change the appearance and behavior of a <xref:System.Windows.Controls.ContextMenu> without writing a custom control. In addition to setting visual properties, you can also apply styles to parts of a control. For example, you can change the behavior of parts of the control by using properties, or you can add parts to, or change the layout of, a <xref:System.Windows.Controls.ContextMenu>. The following examples show several ways to add styles to <xref:System.Windows.Controls.ContextMenu> controls.
|
||||
|
||||
The first example defines a style called `SimpleSysResources`, which shows how to use the current system settings in your style. The example assigns <xref:System.Windows.SystemColors.MenuHighlightBrushKey%2A> as the <xref:System.Windows.Controls.Control.Background%2A> color and <xref:System.Windows.SystemColors.MenuTextBrushKey%2A> as the <xref:System.Windows.Controls.Control.Foreground%2A> color of the <xref:System.Windows.Controls.ContextMenu>.
|
||||
|
||||
```xaml
|
||||
<Style x:Key="SimpleSysResources" TargetType="{x:Type MenuItem}">
|
||||
<Setter Property = "Background" Value=
|
||||
"{DynamicResource {x:Static SystemColors.MenuHighlightBrushKey}}"/>
|
||||
<Setter Property = "Foreground" Value=
|
||||
"{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
|
||||
</Style>
|
||||
```
|
||||
|
||||
The following example uses the <xref:System.Windows.Trigger> element to change the appearance of a <xref:System.Windows.Controls.Menu> in response to events that are raised on the <xref:System.Windows.Controls.ContextMenu>. When a user moves the mouse over the menu, the appearance of the <xref:System.Windows.Controls.ContextMenu> items changes.
|
||||
|
||||
```xaml
|
||||
<Style x:Key="Triggers" TargetType="{x:Type MenuItem}">
|
||||
<Style.Triggers>
|
||||
<Trigger Property="MenuItem.IsMouseOver" Value="true">
|
||||
<Setter Property = "FontSize" Value="16"/>
|
||||
<Setter Property = "FontStyle" Value="Italic"/>
|
||||
<Setter Property = "Foreground" Value="Red"/>
|
||||
</Trigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.ContextMenu>
|
||||
- <xref:System.Windows.Style>
|
||||
- <xref:System.Windows.Controls.Menu>
|
||||
- <xref:System.Windows.Controls.MenuItem>
|
||||
- [ContextMenu](contextmenu.md)
|
||||
- [ContextMenu Styles and Templates](contextmenu-styles-and-templates.md)
|
||||
- [WPF Controls Gallery Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Getting%20Started/ControlsAndLayout)
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: "ContextMenu Styles and Templates"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "templates [WPF], ContextMenu"
|
||||
- "parts [WPF], ContextMenu"
|
||||
- "ContextMenu [WPF], styles and templates"
|
||||
- "styles [WPF], ContextMenu"
|
||||
- "ControlTemplate [WPF], ContextMenu"
|
||||
- "states [WPF], ContextMenu"
|
||||
ms.assetid: 342d1f17-c406-4f94-8f55-867c5f3ea511
|
||||
---
|
||||
# ContextMenu Styles and Templates
|
||||
This topic describes the styles and templates for the <xref:System.Windows.Controls.ContextMenu> control. You can modify the default <xref:System.Windows.Controls.ControlTemplate> to give the control a unique appearance. For more information, see [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template).
|
||||
|
||||
## ContextMenu Parts
|
||||
The <xref:System.Windows.Controls.ContextMenu> control does not have any named parts.
|
||||
|
||||
When you create a <xref:System.Windows.Controls.ControlTemplate> for a <xref:System.Windows.Controls.ContextMenu>, your template might contain an <xref:System.Windows.Controls.ItemsPresenter> within a <xref:System.Windows.Controls.ScrollViewer>. (The <xref:System.Windows.Controls.ItemsPresenter> displays each item in the <xref:System.Windows.Controls.ContextMenu>; the <xref:System.Windows.Controls.ScrollViewer> enables scrolling within the control). If the <xref:System.Windows.Controls.ItemsPresenter> is not the direct child of the <xref:System.Windows.Controls.ScrollViewer>, you must give the <xref:System.Windows.Controls.ItemsPresenter> the name, `ItemsPresenter`.
|
||||
|
||||
## ContextMenu States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.ContextMenu> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control does not have focus.|
|
||||
|
||||
## ContextMenu ControlTemplate Example
|
||||
The following example shows how to define a <xref:System.Windows.Controls.ControlTemplate> for the <xref:System.Windows.Controls.ContextMenu> control.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#ContextMenu](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/menu.xaml#contextmenu)]
|
||||
|
||||
The <xref:System.Windows.Controls.ControlTemplate> uses the following resources.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#Resources](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/shared.xaml#resources)]
|
||||
|
||||
For the complete sample, see [Styling with ControlTemplates Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Styles%20&%20Templates/IntroToStylingAndTemplating).
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.FrameworkElement.Style%2A>
|
||||
- <xref:System.Windows.Controls.ControlTemplate>
|
||||
- [Control Styles and Templates](control-styles-and-templates.md)
|
||||
- [Control Customization](control-customization.md)
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
- [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template)
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: "ContextMenu"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "ContextMenu control [WPF]"
|
||||
- "menus [WPF], context"
|
||||
- "controls [WPF], ContextMenu"
|
||||
ms.assetid: 2f40b2bb-b702-4706-9fc4-10bcfd7cc35d
|
||||
---
|
||||
# ContextMenu
|
||||
The <xref:System.Windows.Controls.ContextMenu> allows a control to display a <xref:System.Windows.Controls.Menu> that is specific to the context of the control. Typically, the <xref:System.Windows.Controls.ContextMenu> is exposed in the [!INCLUDE[TLA#tla_ui](../../../includes/tlasharptla-ui-md.md)] through the right mouse button or through the keyboard’s menu button.
|
||||
|
||||
The following figure illustrates a <xref:System.Windows.Controls.ContextMenu> in two different states: the default state and the open state. In the default state, the control is collapsed. When the right mouse button is pressed over the parent of the menu, the control expands and displays the menu items.
|
||||
|
||||

|
||||
ContextMenu in different states
|
||||
|
||||
## In This Section
|
||||
[ContextMenu Overview](contextmenu-overview.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.ContextMenu>
|
||||
|
||||
## Related Sections
|
||||
@@ -0,0 +1,292 @@
|
||||
---
|
||||
title: "Control Authoring Overview"
|
||||
description: The extensibility of Windows Presentation Foundation controls minimizes the need to create custom controls. Learn how to create a new control, if necessary.
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], authoring overview"
|
||||
- "authoring overview for controls [WPF]"
|
||||
ms.assetid: 3d864748-cff0-4e63-9b23-d8e5a635b28f
|
||||
---
|
||||
# Control authoring overview
|
||||
|
||||
The extensibility of the [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] control model greatly reduces the need to create a new control. However, in certain cases you may still need to create a custom control. This topic discusses the features that minimize your need to create a custom control and the different control authoring models in [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)]. This topic also demonstrates how to create a new control.
|
||||
|
||||
<a name="when_to_write_a_new_control"></a>
|
||||
|
||||
## Alternatives to Writing a New Control
|
||||
|
||||
Historically, if you wanted to get a customized experience from an existing control, you were limited to changing the standard properties of the control, such as background color, border width, and font size. If you wished to extend the appearance or behavior of a control beyond these predefined parameters, you would need to create a new control, usually by inheriting from an existing control and overriding the method responsible for drawing the control. Although that is still an option, [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] enables to you customize existing controls by using its rich content model, styles, templates, and triggers. The following list gives examples of how these features can be used to create custom and consistent experiences without having to create a new control.
|
||||
|
||||
- **Rich Content.** Many of the standard [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] controls support rich content. For example, the content property of a <xref:System.Windows.Controls.Button> is of type <xref:System.Object>, so theoretically anything can be displayed on a <xref:System.Windows.Controls.Button>. To have a button display an image and text, you can add an image and a <xref:System.Windows.Controls.TextBlock> to a <xref:System.Windows.Controls.StackPanel> and assign the <xref:System.Windows.Controls.StackPanel> to the <xref:System.Windows.Controls.ContentControl.Content%2A> property. Because the controls can display [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] visual elements and arbitrary data, there is less need to create a new control or to modify an existing control to support a complex visualization. For more information about the content model for <xref:System.Windows.Controls.Button> and other content models in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)], see [WPF Content Model](wpf-content-model.md).
|
||||
|
||||
- **Styles.** A <xref:System.Windows.Style> is a collection of values that represent properties for a control. By using styles, you can create a reusable representation of a desired control appearance and behavior without writing a new control. For example, assume that you want all of your <xref:System.Windows.Controls.TextBlock> controls to have red, Arial font with a font size of 14. You can create a style as a resource and set the appropriate properties accordingly. Then every <xref:System.Windows.Controls.TextBlock> that you add to your application will have the same appearance.
|
||||
|
||||
- **Data Templates.** A <xref:System.Windows.DataTemplate> enables you to customize how data is displayed on a control. For example, a <xref:System.Windows.DataTemplate> can be used to specify how data is displayed in a <xref:System.Windows.Controls.ListBox>. For an example of this, see [Data Templating Overview](../data/data-templating-overview.md). In addition to customizing the appearance of data, a <xref:System.Windows.DataTemplate> can include UI elements, which gives you a lot of flexibility in custom UIs. For example, by using a <xref:System.Windows.DataTemplate>, you can create a <xref:System.Windows.Controls.ComboBox> in which each item contains a check box.
|
||||
|
||||
- **Control Templates.** Many controls in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] use a <xref:System.Windows.Controls.ControlTemplate> to define the control's structure and appearance, which separates the appearance of a control from the functionality of the control. You can drastically change the appearance of a control by redefining its <xref:System.Windows.Controls.ControlTemplate>. For example, suppose you want a control that looks like a stoplight. This control has a simple user interface and functionality. The control is three circles, only one of which can be lit up at a time. After some reflection, you might realize that a <xref:System.Windows.Controls.RadioButton> offers the functionality of only one being selected at a time, but the default appearance of the <xref:System.Windows.Controls.RadioButton> looks nothing like the lights on a stoplight. Because the <xref:System.Windows.Controls.RadioButton> uses a control template to define its appearance, it is easy to redefine the <xref:System.Windows.Controls.ControlTemplate> to fit the requirements of the control, and use radio buttons to make your stoplight.
|
||||
|
||||
> [!NOTE]
|
||||
> Although a <xref:System.Windows.Controls.RadioButton> can use a <xref:System.Windows.DataTemplate>, a <xref:System.Windows.DataTemplate> is not sufficient in this example. The <xref:System.Windows.DataTemplate> defines the appearance of the content of a control. In the case of a <xref:System.Windows.Controls.RadioButton>, the content is whatever appears to the right of the circle that indicates whether the <xref:System.Windows.Controls.RadioButton> is selected. In the example of the stoplight, the radio button needs just be a circle that can "light up." Because the appearance requirement for the stoplight is so different than the default appearance of the <xref:System.Windows.Controls.RadioButton>, it is necessary to redefine the <xref:System.Windows.Controls.ControlTemplate>. In general a <xref:System.Windows.DataTemplate> is used for defining the content (or data) of a control, and a <xref:System.Windows.Controls.ControlTemplate> is used for defining how a control is structured.
|
||||
|
||||
- **Triggers.** A <xref:System.Windows.Trigger> allows you to dynamically change the appearance and behavior of a control without creating a new control. For example, suppose you have multiple <xref:System.Windows.Controls.ListBox> controls in your application and want the items in each <xref:System.Windows.Controls.ListBox> to be bold and red when they are selected. Your first instinct might be to create a class that inherits from <xref:System.Windows.Controls.ListBox> and override the <xref:System.Windows.Controls.Primitives.Selector.OnSelectionChanged%2A> method to change the appearance of the selected item, but a better approach is to add a trigger to a style of a <xref:System.Windows.Controls.ListBoxItem> that changes the appearance of the selected item. A trigger enables you to change property values or take actions based on the value of a property. An <xref:System.Windows.EventTrigger> enables you to take actions when an event occurs.
|
||||
|
||||
For more information about styles, templates, and triggers, see [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview).
|
||||
|
||||
In general, if your control mirrors the functionality of an existing control, but you want the control to look different, you should first consider whether you can use any of the methods discussed in this section to change the existing control's appearance.
|
||||
|
||||
<a name="models_for_control_authoring"></a>
|
||||
|
||||
## Models for Control Authoring
|
||||
|
||||
The rich content model, styles, templates, and triggers minimize the need for you to create a new control. However, if you do need to create a new control, it is important to understand the different control authoring models in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)]. [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] provides three general models for creating a control, each of which provides a different set of features and level of flexibility. The base classes for the three models are <xref:System.Windows.Controls.UserControl>, <xref:System.Windows.Controls.Control>, and <xref:System.Windows.FrameworkElement>.
|
||||
|
||||
### Deriving from UserControl
|
||||
|
||||
The simplest way to create a control in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] is to derive from <xref:System.Windows.Controls.UserControl>. When you build a control that inherits from <xref:System.Windows.Controls.UserControl>, you add existing components to the <xref:System.Windows.Controls.UserControl>, name the components, and reference event handlers in [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)]. You can then reference the named elements and define the event handlers in code. This development model is very similar to the model used for application development in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)].
|
||||
|
||||
If built correctly, a <xref:System.Windows.Controls.UserControl> can take advantage of the benefits of rich content, styles, and triggers. However, if your control inherits from <xref:System.Windows.Controls.UserControl>, people who use your control will not be able to use a <xref:System.Windows.DataTemplate> or <xref:System.Windows.Controls.ControlTemplate> to customize its appearance. It is necessary to derive from the <xref:System.Windows.Controls.Control> class or one of its derived classes (other than <xref:System.Windows.Controls.UserControl>) to create a custom control that supports templates.
|
||||
|
||||
#### Benefits of Deriving from UserControl
|
||||
|
||||
Consider deriving from <xref:System.Windows.Controls.UserControl> if all of the following apply:
|
||||
|
||||
- You want to build your control similarly to how you build an application.
|
||||
|
||||
- Your control consists only of existing components.
|
||||
|
||||
- You don't need to support complex customization.
|
||||
|
||||
### Deriving from Control
|
||||
|
||||
Deriving from the <xref:System.Windows.Controls.Control> class is the model used by most of the existing [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] controls. When you create a control that inherits from the <xref:System.Windows.Controls.Control> class, you define its appearance by using templates. By doing so, you separate the operational logic from the visual representation. You can also ensure the decoupling of the UI and logic by using commands and bindings instead of events and avoiding referencing elements in the <xref:System.Windows.Controls.ControlTemplate> whenever possible. If the UI and logic of your control are properly decoupled, a user of your control can redefine the control's <xref:System.Windows.Controls.ControlTemplate> to customize its appearance. Although building a custom <xref:System.Windows.Controls.Control> is not as simple as building a <xref:System.Windows.Controls.UserControl>, a custom <xref:System.Windows.Controls.Control> provides the most flexibility.
|
||||
|
||||
#### Benefits of Deriving from Control
|
||||
|
||||
Consider deriving from <xref:System.Windows.Controls.Control> instead of using the <xref:System.Windows.Controls.UserControl> class if any of the following apply:
|
||||
|
||||
- You want the appearance of your control to be customizable via the <xref:System.Windows.Controls.ControlTemplate>.
|
||||
|
||||
- You want your control to support different themes.
|
||||
|
||||
### Deriving from FrameworkElement
|
||||
|
||||
Controls that derive from <xref:System.Windows.Controls.UserControl> or <xref:System.Windows.Controls.Control> rely upon composing existing elements. For many scenarios, this is an acceptable solution, because any object that inherits from <xref:System.Windows.FrameworkElement> can be in a <xref:System.Windows.Controls.ControlTemplate>. However, there are times when a control's appearance requires more than the functionality of simple element composition. For these scenarios, basing a component on <xref:System.Windows.FrameworkElement> is the right choice.
|
||||
|
||||
There are two standard methods for building <xref:System.Windows.FrameworkElement>-based components: direct rendering and custom element composition. Direct rendering involves overriding the <xref:System.Windows.UIElement.OnRender%2A> method of <xref:System.Windows.FrameworkElement> and providing <xref:System.Windows.Media.DrawingContext> operations that explicitly define the component visuals. This is the method used by <xref:System.Windows.Controls.Image> and <xref:System.Windows.Controls.Border>. Custom element composition involves using objects of type <xref:System.Windows.Media.Visual> to compose the appearance of your component. For an example, see [Using DrawingVisual Objects](../graphics-multimedia/using-drawingvisual-objects.md). <xref:System.Windows.Controls.Primitives.Track> is an example of a control in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] that uses custom element composition. It is also possible to mix direct rendering and custom element composition in the same control.
|
||||
|
||||
#### Benefits of Deriving from FrameworkElement
|
||||
|
||||
Consider deriving from <xref:System.Windows.FrameworkElement> if any of the following apply:
|
||||
|
||||
- You want to have precise control over the appearance of your control beyond what is provided by simple element composition.
|
||||
|
||||
- You want to define the appearance of your control by defining your own render logic.
|
||||
|
||||
- You want to compose existing elements in novel ways that go beyond what is possible with <xref:System.Windows.Controls.UserControl> and <xref:System.Windows.Controls.Control>.
|
||||
|
||||
<a name="control_authoring_basics"></a>
|
||||
|
||||
## Control Authoring Basics
|
||||
|
||||
As discussed earlier, one of the most powerful features of [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] is the ability to go beyond setting basic properties of a control to change its appearance and behavior, yet still not needing to create a custom control. The styling, data binding, and trigger features are made possible by the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] property system and the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] event system. The following sections describe some practices that you should follow, regardless of the model you use to create the custom control, so that users of your custom control can use these features just as they would for a control that is included with [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)].
|
||||
|
||||
### Use Dependency Properties
|
||||
|
||||
When a property is a dependency property, it is possible to do the following:
|
||||
|
||||
- Set the property in a style.
|
||||
|
||||
- Bind the property to a data source.
|
||||
|
||||
- Use a dynamic resource as the property's value.
|
||||
|
||||
- Animate the property.
|
||||
|
||||
If you want a property of your control to support any of this functionality, you should implement it as a dependency property. The following example defines a dependency property named `Value` by doing the following:
|
||||
|
||||
- Define a <xref:System.Windows.DependencyProperty> identifier named `ValueProperty` as a `public` `static` `readonly` field.
|
||||
|
||||
- Register the property name with the property system, by calling <xref:System.Windows.DependencyProperty.Register%2A?displayProperty=nameWithType>, to specify the following:
|
||||
|
||||
- The name of the property.
|
||||
|
||||
- The type of the property.
|
||||
|
||||
- The type that owns the property.
|
||||
|
||||
- The metadata for the property. The metadata contains the property's default value, a <xref:System.Windows.CoerceValueCallback> and a <xref:System.Windows.PropertyChangedCallback>.
|
||||
|
||||
- Define a CLR wrapper property named `Value`, which is the same name that is used to register the dependency property, by implementing the property's `get` and `set` accessors. Note that the `get` and `set` accessors only call <xref:System.Windows.DependencyObject.GetValue%2A> and <xref:System.Windows.DependencyObject.SetValue%2A> respectively. It is recommended that the accessors of dependency properties not contain additional logic because clients and [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] can bypass the accessors and call <xref:System.Windows.DependencyObject.GetValue%2A> and <xref:System.Windows.DependencyObject.SetValue%2A> directly. For example, when a property is bound to a data source, the property's `set` accessor is not called. Instead of adding additional logic to the get and set accessors, use the <xref:System.Windows.ValidateValueCallback>, <xref:System.Windows.CoerceValueCallback>, and <xref:System.Windows.PropertyChangedCallback> delegates to respond to or check the value when it changes. For more information on these callbacks, see [Dependency Property Callbacks and Validation](../advanced/dependency-property-callbacks-and-validation.md).
|
||||
|
||||
- Define a method for the <xref:System.Windows.CoerceValueCallback> named `CoerceValue`. `CoerceValue` ensures that `Value` is greater or equal to `MinValue` and less than or equal to `MaxValue`.
|
||||
|
||||
- Define a method for the <xref:System.Windows.PropertyChangedCallback>, named `OnValueChanged`. `OnValueChanged` creates a <xref:System.Windows.RoutedPropertyChangedEventArgs%601> object and prepares to raise the `ValueChanged` routed event. Routed events are discussed in the next section.
|
||||
|
||||
[!code-csharp[UserControlNumericUpDown#DependencyProperty](~/samples/snippets/csharp/VS_Snippets_Wpf/UserControlNumericUpDown/CSharp/NumericUpDown.xaml.cs#dependencyproperty)]
|
||||
[!code-vb[UserControlNumericUpDown#DependencyProperty](~/samples/snippets/visualbasic/VS_Snippets_Wpf/UserControlNumericUpDown/visualbasic/numericupdown.xaml.vb#dependencyproperty)]
|
||||
|
||||
For more information, see [Custom Dependency Properties](../advanced/custom-dependency-properties.md).
|
||||
|
||||
### Use Routed Events
|
||||
|
||||
Just as dependency properties extend the notion of CLR properties with additional functionality, routed events extend the notion of standard CLR events. When you create a new [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] control, it is also good practice to implement your event as a routed event because a routed event supports the following behavior:
|
||||
|
||||
- Events can be handled on a parent of multiple controls. If an event is a bubbling event, a single parent in the element tree can subscribe to the event. Then application authors can use one handler to respond to the event of multiple controls. For example, if your control is a part of each item in a <xref:System.Windows.Controls.ListBox> (because it is included in a <xref:System.Windows.DataTemplate>), the application developer can define the event handler for your control's event on the <xref:System.Windows.Controls.ListBox>. Whenever the event occurs on any of the controls, the event handler is called.
|
||||
|
||||
- Routed events can be used in an <xref:System.Windows.EventSetter>, which enables application developers to specify the handler of an event within a style.
|
||||
|
||||
- Routed events can be used in an <xref:System.Windows.EventTrigger>, which is useful for animating properties by using [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)]. For more information, see [Animation Overview](../graphics-multimedia/animation-overview.md).
|
||||
|
||||
The following example defines a routed event by doing the following:
|
||||
|
||||
- Define a <xref:System.Windows.RoutedEvent> identifier named `ValueChangedEvent` as a `public` `static` `readonly` field.
|
||||
|
||||
- Register the routed event by calling the <xref:System.Windows.EventManager.RegisterRoutedEvent%2A?displayProperty=nameWithType> method. The example specifies the following information when it calls <xref:System.Windows.EventManager.RegisterRoutedEvent%2A>:
|
||||
|
||||
- The name of the event is `ValueChanged`.
|
||||
|
||||
- The routing strategy is <xref:System.Windows.RoutingStrategy.Bubble>, which means that an event handler on the source (the object that raises the event) is called first, and then event handlers on the source's parent elements are called in succession, starting with the event handler on the closest parent element.
|
||||
|
||||
- The type of the event handler is <xref:System.Windows.RoutedPropertyChangedEventHandler%601>, constructed with a <xref:System.Decimal> type.
|
||||
|
||||
- The owning type of the event is `NumericUpDown`.
|
||||
|
||||
- Declare a public event named `ValueChanged` and includes event-accessor declarations. The example calls <xref:System.Windows.UIElement.AddHandler%2A> in the `add` accessor declaration and <xref:System.Windows.UIElement.RemoveHandler%2A> in the `remove` accessor declaration to use the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] event services.
|
||||
|
||||
- Create a protected, virtual method named `OnValueChanged` that raises the `ValueChanged` event.
|
||||
|
||||
[!code-csharp[UserControlNumericUpDown#RoutedEvent](~/samples/snippets/csharp/VS_Snippets_Wpf/UserControlNumericUpDown/CSharp/NumericUpDown.xaml.cs#routedevent)]
|
||||
[!code-vb[UserControlNumericUpDown#RoutedEvent](~/samples/snippets/visualbasic/VS_Snippets_Wpf/UserControlNumericUpDown/visualbasic/numericupdown.xaml.vb#routedevent)]
|
||||
|
||||
For more information, see [Routed Events Overview](../advanced/routed-events-overview.md) and [Create a Custom Routed Event](../advanced/how-to-create-a-custom-routed-event.md).
|
||||
|
||||
### Use Binding
|
||||
|
||||
To decouple the UI of your control from its logic, consider using data binding. This is particularly important if you define the appearance of your control by using a <xref:System.Windows.Controls.ControlTemplate>. When you use data binding, you might be able to eliminate the need to reference specific parts of the UI from the code. It's a good idea to avoid referencing elements that are in the <xref:System.Windows.Controls.ControlTemplate> because when the code references elements that are in the <xref:System.Windows.Controls.ControlTemplate> and the <xref:System.Windows.Controls.ControlTemplate> is changed, the referenced element needs to be included in the new <xref:System.Windows.Controls.ControlTemplate>.
|
||||
|
||||
The following example updates the <xref:System.Windows.Controls.TextBlock> of the `NumericUpDown` control, assigning a name to it and referencing the textbox by name in code.
|
||||
|
||||
[!code-xaml[UserControlNumericUpDownSimple#UIRefMarkup](~/samples/snippets/csharp/VS_Snippets_Wpf/UserControlNumericUpDownSimple/CSharp/NumericUpDown.xaml#uirefmarkup)]
|
||||
|
||||
[!code-csharp[UserControlNumericUpDownSimple#UIRefCode](~/samples/snippets/csharp/VS_Snippets_Wpf/UserControlNumericUpDownSimple/CSharp/NumericUpDown.xaml.cs#uirefcode)]
|
||||
[!code-vb[UserControlNumericUpDownSimple#UIRefCode](~/samples/snippets/visualbasic/VS_Snippets_Wpf/UserControlNumericUpDownSimple/VisualBasic/NumericUpDown.xaml.vb#uirefcode)]
|
||||
|
||||
The following example uses binding to accomplish the same thing.
|
||||
|
||||
[!code-xaml[UserControlNumericUpDown#Binding](~/samples/snippets/csharp/VS_Snippets_Wpf/UserControlNumericUpDown/CSharp/NumericUpDown.xaml#binding)]
|
||||
|
||||
For more information about data binding, see [Data Binding Overview](/dotnet/desktop-wpf/data/data-binding-overview).
|
||||
|
||||
### Design for Designers
|
||||
|
||||
To receive support for custom WPF controls in the WPF Designer for Visual Studio (for example, property editing with the Properties window), follow these guidelines. For more information on developing for the WPF Designer, see [Design XAML in Visual Studio](/visualstudio/xaml-tools/designing-xaml-in-visual-studio).
|
||||
|
||||
#### Dependency Properties
|
||||
|
||||
Be sure to implement CLR `get` and `set` accessors as described earlier, in "Use Dependency Properties." Designers may use the wrapper to detect the presence of a dependency property, but they, like [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] and clients of the control, are not required to call the accessors when getting or setting the property.
|
||||
|
||||
#### Attached Properties
|
||||
|
||||
You should implement attached properties on custom controls using the following guidelines:
|
||||
|
||||
- Have a `public` `static` `readonly` <xref:System.Windows.DependencyProperty> of the form *PropertyName*`Property` that was creating using the <xref:System.Windows.DependencyProperty.RegisterAttached%2A> method. The property name that is passed to <xref:System.Windows.DependencyProperty.RegisterAttached%2A> must match *PropertyName*.
|
||||
|
||||
- Implement a pair of `public` `static` CLR methods named `Set`*PropertyName* and `Get`*PropertyName*. Both methods should accept a class derived from <xref:System.Windows.DependencyProperty> as their first argument. The `Set`*PropertyName* method also accepts an argument whose type matches the registered data type for the property. The `Get`*PropertyName* method should return a value of the same type. If the `Set`*PropertyName* method is missing, the property is marked read-only.
|
||||
|
||||
- `Set` *PropertyName* and `Get`*PropertyName* must route directly to the <xref:System.Windows.DependencyObject.GetValue%2A> and <xref:System.Windows.DependencyObject.SetValue%2A> methods on the target dependency object, respectively. Designers may access the attached property by calling through the method wrapper or making a direct call to the target dependency object.
|
||||
|
||||
For more information on attached properties, see [Attached Properties Overview](../advanced/attached-properties-overview.md).
|
||||
|
||||
### Define and Use Shared Resources
|
||||
|
||||
You can include your control in the same assembly as your application, or you can package your control in a separate assembly that can be used in multiple applications. For the most part, the information discussed in this topic applies regardless of the method you use. There is one difference worth noting, however. When you put a control in the same assembly as an application, you are free to add global resources to the App.xaml file. But an assembly that contains only controls does not have an <xref:System.Windows.Application> object associated with it, so an App.xaml file is not available.
|
||||
|
||||
When an application looks for a resource, it looks at three levels in the following order:
|
||||
|
||||
1. The element level.
|
||||
|
||||
The system starts with the element that references the resource and then searches resources of the logical parent and so forth until the root element is reached.
|
||||
|
||||
2. The application level.
|
||||
|
||||
Resources defined by the <xref:System.Windows.Application> object.
|
||||
|
||||
3. The theme level.
|
||||
|
||||
Theme-level dictionaries are stored in a subfolder named Themes. The files in the Themes folder correspond to themes. For example, you might have Aero.NormalColor.xaml, Luna.NormalColor.xaml, Royale.NormalColor.xaml, and so on. You can also have a file named generic.xaml. When the system looks for a resource at the themes level, it first looks for it in the theme-specific file and then looks for it in generic.xaml.
|
||||
|
||||
When your control is in an assembly that is separate from the application, you must put your global resources at the element level or at the theme level. Both methods have their advantages.
|
||||
|
||||
#### Defining Resources at the Element Level
|
||||
|
||||
You can define shared resources at the element level by creating a custom resource dictionary and merging it with your control's resource dictionary. When you use this method, you can name your resource file anything you want, and it can be in the same folder as your controls. Resources at the element level can also use simple strings as keys. The following example creates a <xref:System.Windows.Media.LinearGradientBrush> resource file named Dictionary1.xaml.
|
||||
|
||||
[!code-xaml[SharedResources#1](~/samples/snippets/csharp/VS_Snippets_Wpf/SharedResources/CS/Dictionary1.xaml#1)]
|
||||
|
||||
Once you have defined your dictionary, you need to merge it with your control's resource dictionary. You can do this by using [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] or code.
|
||||
|
||||
The following example merges a resource dictionary by using [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)].
|
||||
|
||||
[!code-xaml[SharedResources#2](~/samples/snippets/csharp/VS_Snippets_Wpf/SharedResources/CS/ShapeResizer.xaml#2)]
|
||||
|
||||
The disadvantage to this approach is that a <xref:System.Windows.ResourceDictionary> object is created each time you reference it. For example, if you have 10 custom controls in your library and merge the shared resource dictionaries for each control by using XAML, you create 10 identical <xref:System.Windows.ResourceDictionary> objects. You can avoid this by creating a static class that merges the resources in code and returns the resulting <xref:System.Windows.ResourceDictionary>.
|
||||
|
||||
The following example creates a class that returns a shared <xref:System.Windows.ResourceDictionary>.
|
||||
|
||||
[!code-csharp[SharedResources#3](~/samples/snippets/csharp/VS_Snippets_Wpf/SharedResources/CS/SharedDictionaryManager.cs#3)]
|
||||
|
||||
The following example merges the shared resource with the resources of a custom control in the control's constructor before it calls `InitializeComponent`. Because the `SharedDictionaryManager.SharedDictionary` is a static property, the <xref:System.Windows.ResourceDictionary> is created only once. Because the resource dictionary was merged before `InitializeComponent` was called, the resources are available to the control in its [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] file.
|
||||
|
||||
[!code-csharp[SharedResources#4](~/samples/snippets/csharp/VS_Snippets_Wpf/SharedResources/CS/ShapeResizer.xaml.cs#4)]
|
||||
|
||||
#### Defining Resources at the Theme Level
|
||||
|
||||
[!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] enables you to create resources for different Windows themes. As a control author, you can define a resource for a specific theme to change your control's appearance depending on what theme is in use. For example, the appearance of a <xref:System.Windows.Controls.Button> in the Windows Classic theme (the default theme for Windows 2000) differs from a <xref:System.Windows.Controls.Button> in the Windows Luna theme (the default theme for Windows XP) because the <xref:System.Windows.Controls.Button> uses a different <xref:System.Windows.Controls.ControlTemplate> for each theme.
|
||||
|
||||
Resources that are specific to a theme are kept in a resource dictionary with a specific file name. These files must be in a folder named `Themes` that is a subfolder of the folder that contains the control. The following table lists the resource dictionary files and the theme that is associated with each file:
|
||||
|
||||
|Resource dictionary file name|Windows theme|
|
||||
|-----------------------------------|-------------------|
|
||||
|`Classic.xaml`|Classic Windows 9x/2000 look on Windows XP|
|
||||
|`Luna.NormalColor.xaml`|Default blue theme on Windows XP|
|
||||
|`Luna.Homestead.xaml`|Olive theme on Windows XP|
|
||||
|`Luna.Metallic.xaml`|Silver theme on Windows XP|
|
||||
|`Royale.NormalColor.xaml`|Default theme on Windows XP Media Center Edition|
|
||||
|`Aero.NormalColor.xaml`|Default theme on Windows Vista|
|
||||
|
||||
You do not need to define a resource for every theme. If a resource is not defined for a specific theme, then the control checks `Classic.xaml` for the resource. If the resource is not defined in the file that corresponds to the current theme or in `Classic.xaml`, the control uses the generic resource, which is in a resource dictionary file named `generic.xaml`. The `generic.xaml` file is located in the same folder as the theme-specific resource dictionary files. Although `generic.xaml` does not correspond to a specific Windows theme, it is still a theme-level dictionary.
|
||||
|
||||
The [C#](https://github.com/dotnet/docs/tree/master/samples/snippets/csharp/VS_Snippets_Wpf/CustomControlNumericUpDown/CSharp) or [Visual Basic](https://github.com/dotnet/docs/tree/master/samples/snippets/visualbasic/VS_Snippets_Wpf/CustomControlNumericUpDown/visualbasic) NumericUpDown custom control with theme and UI automation support sample contains two resource dictionaries for the `NumericUpDown` control: one is in generic.xaml, and the other is in Luna.NormalColor.xaml.
|
||||
|
||||
When you put a <xref:System.Windows.Controls.ControlTemplate> in any of the theme-specific resource dictionary files, you must create a static constructor for your control and call the <xref:System.Windows.DependencyProperty.OverrideMetadata%28System.Type%2CSystem.Windows.PropertyMetadata%29> method on the <xref:System.Windows.FrameworkElement.DefaultStyleKey%2A>, as shown in the following example.
|
||||
|
||||
[!code-csharp[CustomControlNumericUpDownOneProject#StaticConstructor](~/samples/snippets/csharp/VS_Snippets_Wpf/CustomControlNumericUpDownOneProject/CSharp/NumericUpDown.cs#staticconstructor)]
|
||||
[!code-vb[CustomControlNumericUpDownOneProject#StaticConstructor](~/samples/snippets/visualbasic/VS_Snippets_Wpf/CustomControlNumericUpDownOneProject/visualbasic/numericupdown.vb#staticconstructor)]
|
||||
|
||||
##### Defining and Referencing Keys for Theme Resources
|
||||
|
||||
When you define a resource at the element level, you can assign a string as its key and access the resource via the string. When you define a resource at the theme level, you must use a <xref:System.Windows.ComponentResourceKey> as the key. The following example defines a resource in generic.xaml.
|
||||
|
||||
[!code-xaml[ThemeResourcesControlLibrary#5](~/samples/snippets/csharp/VS_Snippets_Wpf/ThemeResourcesControlLibrary/CS/Themes/generic.xaml#5)]
|
||||
|
||||
The following example references the resource by specifying the <xref:System.Windows.ComponentResourceKey> as the key.
|
||||
|
||||
[!code-xaml[ThemeResourcesControlLibrary#6](~/samples/snippets/csharp/VS_Snippets_Wpf/ThemeResourcesControlLibrary/CS/NumericUpDown.xaml#6)]
|
||||
|
||||
##### Specifying the Location of Theme Resources
|
||||
|
||||
To find the resources for a control, the hosting application needs to know that the assembly contains control-specific resources. You can accomplish that by adding the <xref:System.Windows.ThemeInfoAttribute> to the assembly that contains the control. The <xref:System.Windows.ThemeInfoAttribute> has a <xref:System.Windows.ThemeInfoAttribute.GenericDictionaryLocation%2A> property that specifies the location of generic resources, and a <xref:System.Windows.ThemeInfoAttribute.ThemeDictionaryLocation%2A> property that specifies the location of the theme-specific resources.
|
||||
|
||||
The following example sets the <xref:System.Windows.ThemeInfoAttribute.GenericDictionaryLocation%2A> and <xref:System.Windows.ThemeInfoAttribute.ThemeDictionaryLocation%2A> properties to <xref:System.Windows.ResourceDictionaryLocation.SourceAssembly>, to specify that the generic and theme-specific resources are in the same assembly as the control.
|
||||
|
||||
[!code-csharp[CustomControlNumericUpDown#ThemesSection](~/samples/snippets/csharp/VS_Snippets_Wpf/CustomControlNumericUpDown/CSharp/CustomControlLibrary/Properties/AssemblyInfo.cs#themessection)]
|
||||
[!code-vb[CustomControlNumericUpDown#ThemesSection](~/samples/snippets/visualbasic/VS_Snippets_Wpf/CustomControlNumericUpDown/visualbasic/customcontrollibrary/my project/assemblyinfo.vb#themessection)]
|
||||
|
||||
## See also
|
||||
|
||||
- [Design XAML in Visual Studio](/visualstudio/xaml-tools/designing-xaml-in-visual-studio)
|
||||
- [Pack URIs in WPF](../app-development/pack-uris-in-wpf.md)
|
||||
- [Control Customization](control-customization.md)
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
title: "Control Customization"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "customizing controls [WPF]"
|
||||
- "controls [WPF], customization"
|
||||
ms.assetid: a3d9930e-5597-470e-a636-dcf65eac500b
|
||||
---
|
||||
# Control Customization
|
||||
This category covers the various base classes, interfaces and other elements and concepts used in creating a fully functional [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] control.
|
||||
|
||||
## In This Section
|
||||
[Control Authoring Overview](control-authoring-overview.md)
|
||||
[Guidelines for Designing Stylable Controls](guidelines-for-designing-stylable-controls.md)
|
||||
[Adorners](adorners.md)
|
||||
[Control Styles and Templates](control-styles-and-templates.md)
|
||||
[UI Automation of a WPF Custom Control](ui-automation-of-a-wpf-custom-control.md)
|
||||
|
||||
## See also
|
||||
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
title: "Control Library"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "control library [WPF]"
|
||||
- "libraries [WPF], controls"
|
||||
ms.assetid: c1b33289-c389-4ac2-b153-3cbb0d8324ad
|
||||
---
|
||||
# Control Library
|
||||
The Windows Presentation Foundation (WPF) control library contains information on the controls provided by Windows Presentation Foundation (WPF), listed alphabetically.
|
||||
|
||||
## In This Section
|
||||
[Border](border.md)
|
||||
[BulletDecorator](bulletdecorator.md)
|
||||
[Button](button.md)
|
||||
[Calendar](calendar.md)
|
||||
[Canvas](canvas.md)
|
||||
[CheckBox](checkbox.md)
|
||||
[ComboBox](combobox.md)
|
||||
[ContextMenu](contextmenu.md)
|
||||
[DataGrid](datagrid.md)
|
||||
[DatePicker](datepicker.md)
|
||||
[DockPanel](dockpanel.md)
|
||||
[DocumentViewer](documentviewer.md)
|
||||
[Expander](expander.md)
|
||||
[FlowDocumentPageViewer](flowdocumentpageviewer.md)
|
||||
[FlowDocumentReader](flowdocumentreader.md)
|
||||
[FlowDocumentScrollViewer](flowdocumentscrollviewer.md)
|
||||
[Frame](frame.md)
|
||||
[Grid](grid.md)
|
||||
[GridSplitter](gridsplitter.md)
|
||||
[GroupBox](groupbox.md)
|
||||
[Image](image.md)
|
||||
[Label](label.md)
|
||||
[ListBox](listbox.md)
|
||||
[ListView](listview.md)
|
||||
[Menu](menu.md)
|
||||
[Panel](panel.md)
|
||||
[PasswordBox](passwordbox.md)
|
||||
[Popup](popup.md)
|
||||
[ProgressBar](progressbar.md)
|
||||
[PrintDialog](printdialog.md)
|
||||
[RadioButton](radiobutton.md)
|
||||
[RepeatButton](repeatbutton.md)
|
||||
[RichTextBox](richtextbox.md)
|
||||
[ScrollBar](scrollbar.md)
|
||||
[ScrollViewer](scrollviewer.md)
|
||||
[Separator](separator.md)
|
||||
[Slider](slider.md)
|
||||
[StackPanel](stackpanel.md)
|
||||
[StatusBar](statusbar.md)
|
||||
[TabControl](tabcontrol.md)
|
||||
[TextBlock](textblock.md)
|
||||
[TextBox](textbox.md)
|
||||
[ToolBar](toolbar.md)
|
||||
[ToolTip](tooltip.md)
|
||||
[TreeView](treeview.md)
|
||||
[WrapPanel](wrappanel.md)
|
||||
[Viewbox](viewbox.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls>
|
||||
|
||||
<xref:System.Windows.Controls.Primitives>
|
||||
|
||||
## Related Sections
|
||||
[Control Customization](control-customization.md)
|
||||
|
||||
[Controls by Category](controls-by-category.md)
|
||||
|
||||
[WPF Content Model](wpf-content-model.md)
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
title: "Control Styles and Templates"
|
||||
description: Learn how to change the structure and appearance of a Windows Presentation Foundation control by modifying the ControlTemplate of that control.
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "styles [WPF]"
|
||||
- "ControlTemplate [WPF]"
|
||||
- "parts [WPF]"
|
||||
- "states [WPF]"
|
||||
- "templates [WPF]"
|
||||
ms.assetid: c19049bb-5ceb-492d-afd2-751dca0ed8e3
|
||||
---
|
||||
# Control Styles and Templates
|
||||
Controls in Windows Presentation Foundation (WPF) have a <xref:System.Windows.Controls.ControlTemplate> that contains the visual tree of that control. You can change the structure and appearance of a control by modifying the <xref:System.Windows.Controls.ControlTemplate> of that control. There is no way to replace only part of the visual tree of a control; to change the visual tree of a control you must set the <xref:System.Windows.Controls.Control.Template%2A> property of the control to its new and complete <xref:System.Windows.Controls.ControlTemplate>.
|
||||
|
||||
The desktop themes determine which resource dictionary is used. To get the resource dictionaries for the desktop themes, see [Default WPF Themes](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/2DTransforms).
|
||||
|
||||
The following table describes the resource dictionary file names and their corresponding desktop themes.
|
||||
|
||||
|Theme file|Desktop theme|
|
||||
|----------------|-------------------|
|
||||
|Classic.xaml|Classic Windows look (from Windows 95, Windows 98, and Windows 2000) on the Windows XP operating system..|
|
||||
|Luna.NormalColor.xaml|Default blue theme on Windows XP.|
|
||||
|Luna.Homestead.xaml|Olive theme on Windows XP.|
|
||||
|Luna.Metallic.xaml|Silver theme on Windows XP.|
|
||||
|Royale.NormalColor.xaml|Default theme on the Windows XP Media Center Edition operating system.|
|
||||
|Aero.NormalColor.xaml|Default theme on the Windows Vista operating system.|
|
||||
|
||||
## In This Section
|
||||
[Button Styles and Templates](button-styles-and-templates.md)
|
||||
[Calendar Styles and Templates](calendar-styles-and-templates.md)
|
||||
[CheckBox Styles and Templates](checkbox-styles-and-templates.md)
|
||||
[ComboBox Styles and Templates](combobox-styles-and-templates.md)
|
||||
[ContextMenu Styles and Templates](contextmenu-styles-and-templates.md)
|
||||
[DataGrid Styles and Templates](datagrid-styles-and-templates.md)
|
||||
[DatePicker Styles and Templates](datepicker-styles-and-templates.md)
|
||||
[DocumentViewer Styles and Templates](documentviewer-styles-and-templates.md)
|
||||
[Expander Styles and Templates](expander-styles-and-templates.md)
|
||||
[Frame Styles and Templates](frame-styles-and-templates.md)
|
||||
[GroupBox Styles and Templates](groupbox-styles-and-templates.md)
|
||||
[Label Styles and Templates](label-styles-and-templates.md)
|
||||
[ListBox Styles and Templates](listbox-styles-and-templates.md)
|
||||
[ListView Styles and Templates](listview-styles-and-templates.md)
|
||||
[Menu Styles and Templates](menu-styles-and-templates.md)
|
||||
[NavigationWindow Styles and Templates](navigationwindow-styles-and-templates.md)
|
||||
[PasswordBox Styles and Templates](passwordbox-styles-and-templates.md)
|
||||
[ProgressBar Styles and Templates](progressbar-styles-and-templates.md)
|
||||
[RadioButton Styles and Templates](radiobutton-styles-and-templates.md)
|
||||
[RepeatButton Styles and Templates](repeatbutton-styles-and-templates.md)
|
||||
[ScrollBar Styles and Templates](scrollbar-styles-and-templates.md)
|
||||
[ScrollViewer Styles and Templates](scrollviewer-styles-and-templates.md)
|
||||
[Slider Styles and Templates](slider-styles-and-templates.md)
|
||||
[StatusBar Styles and Templates](statusbar-styles-and-templates.md)
|
||||
[TabControl Styles and Templates](tabcontrol-styles-and-templates.md)
|
||||
[TextBox Styles and Templates](textbox-styles-and-templates.md)
|
||||
[Thumb Styles and Templates](thumb-styles-and-templates.md)
|
||||
[ToggleButton Styles and Templates](togglebutton-styles-and-templates.md)
|
||||
[ToolBar Styles and Templates](toolbar-styles-and-templates.md)
|
||||
[ToolTip Styles and Templates](tooltip-styles-and-templates.md)
|
||||
[TreeView Styles and Templates](treeview-styles-and-templates.md)
|
||||
[Window Styles and Templates](window-styles-and-templates.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls>
|
||||
|
||||
<xref:System.Windows.Controls.ControlTemplate>
|
||||
|
||||
## Related Sections
|
||||
[Control Authoring Overview](control-authoring-overview.md)
|
||||
|
||||
[Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
@@ -0,0 +1,177 @@
|
||||
---
|
||||
title: "Controls by Category"
|
||||
description: Review Windows Presentation Foundation controls grouped into categories, which can help you select the appropriate control by comparing similar controls.
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], listed by category"
|
||||
ms.assetid: f8a1f78e-d9fa-4367-9ec6-f084577e83bb
|
||||
---
|
||||
# Controls by Category
|
||||
Windows Presentation Foundation (WPF) controls can be logically grouped into several categories. These categories can be used to select the appropriate control for your scenario by helping you see which controls have similar usage patterns or functionality.
|
||||
|
||||
## Layout
|
||||
Layout controls are used to manage the size, dimensions, position, and arrangement of child elements.
|
||||
|
||||
- <xref:System.Windows.Controls.Border>
|
||||
|
||||
- <xref:System.Windows.Controls.Primitives.BulletDecorator>
|
||||
|
||||
- <xref:System.Windows.Controls.Canvas>
|
||||
|
||||
- <xref:System.Windows.Controls.DockPanel>
|
||||
|
||||
- <xref:System.Windows.Controls.Expander>
|
||||
|
||||
- <xref:System.Windows.Controls.Grid>
|
||||
|
||||
- <xref:System.Windows.Controls.GridSplitter>
|
||||
|
||||
- <xref:System.Windows.Controls.GroupBox>
|
||||
|
||||
- <xref:System.Windows.Controls.Panel>
|
||||
|
||||
- <xref:System.Windows.Controls.Primitives.ResizeGrip>
|
||||
|
||||
- <xref:System.Windows.Controls.Separator>
|
||||
|
||||
- <xref:System.Windows.Controls.Primitives.ScrollBar>
|
||||
|
||||
- <xref:System.Windows.Controls.ScrollViewer>
|
||||
|
||||
- <xref:System.Windows.Controls.StackPanel>
|
||||
|
||||
- <xref:System.Windows.Controls.Primitives.Thumb>
|
||||
|
||||
- <xref:System.Windows.Controls.Viewbox>
|
||||
|
||||
- <xref:System.Windows.Controls.VirtualizingStackPanel>
|
||||
|
||||
- <xref:System.Windows.Window>
|
||||
|
||||
- <xref:System.Windows.Controls.WrapPanel>
|
||||
|
||||
## Buttons
|
||||
Buttons are one of the most basic user interface controls. Applications typically perform some task in the <xref:System.Windows.Controls.Primitives.ButtonBase.Click> event when a user clicks on them.
|
||||
|
||||
- <xref:System.Windows.Controls.Button>
|
||||
|
||||
- <xref:System.Windows.Controls.Primitives.RepeatButton>
|
||||
|
||||
## Data Display
|
||||
Data display controls are used to show information from a data source.
|
||||
|
||||
- <xref:System.Windows.Controls.DataGrid>
|
||||
|
||||
- <xref:System.Windows.Controls.ListView>
|
||||
|
||||
- <xref:System.Windows.Controls.TreeView>
|
||||
|
||||
## Date Display and Selection
|
||||
Date controls are used to display and select calendar information.
|
||||
|
||||
- <xref:System.Windows.Controls.Calendar>
|
||||
|
||||
- <xref:System.Windows.Controls.DatePicker>
|
||||
|
||||
## Menus
|
||||
Menus are used to group related actions or to provide contextual assistance.
|
||||
|
||||
- <xref:System.Windows.Controls.ContextMenu>
|
||||
|
||||
- <xref:System.Windows.Controls.Menu>
|
||||
|
||||
- <xref:System.Windows.Controls.ToolBar>
|
||||
|
||||
## Selection
|
||||
Selection controls are used to enable a user to select one or more options.
|
||||
|
||||
- <xref:System.Windows.Controls.CheckBox>
|
||||
|
||||
- <xref:System.Windows.Controls.ComboBox>
|
||||
|
||||
- <xref:System.Windows.Controls.ListBox>
|
||||
|
||||
- <xref:System.Windows.Controls.RadioButton>
|
||||
|
||||
- <xref:System.Windows.Controls.Slider>
|
||||
|
||||
## Navigation
|
||||
Navigation controls enhance or extend the application navigation experience by creating targeting frames or tabbed application appearance.
|
||||
|
||||
- <xref:System.Windows.Controls.Frame>
|
||||
|
||||
- <xref:System.Windows.Documents.Hyperlink>
|
||||
|
||||
- <xref:System.Windows.Controls.Page>
|
||||
|
||||
- <xref:System.Windows.Navigation.NavigationWindow>
|
||||
|
||||
- <xref:System.Windows.Controls.TabControl>
|
||||
|
||||
## Dialog Boxes
|
||||
Dialog boxes provide targeted support for common user-interaction scenarios such as printing.
|
||||
|
||||
- <xref:Microsoft.Win32.OpenFileDialog>
|
||||
|
||||
- <xref:System.Windows.Controls.PrintDialog>
|
||||
|
||||
- <xref:Microsoft.Win32.SaveFileDialog>
|
||||
|
||||
## User Information
|
||||
User information controls provide contextual feedback or clarify an application's user interface. The user typically cannot interact with these controls.
|
||||
|
||||
- <xref:System.Windows.Controls.AccessText>
|
||||
|
||||
- <xref:System.Windows.Controls.Label>
|
||||
|
||||
- <xref:System.Windows.Controls.Primitives.Popup>
|
||||
|
||||
- <xref:System.Windows.Controls.ProgressBar>
|
||||
|
||||
- <xref:System.Windows.Controls.Primitives.StatusBar>
|
||||
|
||||
- <xref:System.Windows.Controls.TextBlock>
|
||||
|
||||
- <xref:System.Windows.Controls.ToolTip>
|
||||
|
||||
## Documents
|
||||
WPF includes several specialized controls for viewing documents. These controls optimize the reading experience, based on the targeted user scenario.
|
||||
|
||||
- <xref:System.Windows.Controls.DocumentViewer>
|
||||
|
||||
- <xref:System.Windows.Controls.FlowDocumentPageViewer>
|
||||
|
||||
- <xref:System.Windows.Controls.FlowDocumentReader>
|
||||
|
||||
- <xref:System.Windows.Controls.FlowDocumentScrollViewer>
|
||||
|
||||
- <xref:System.Windows.Controls.StickyNoteControl>
|
||||
|
||||
## Input
|
||||
Input controls enable the user to input text and other content.
|
||||
|
||||
- <xref:System.Windows.Controls.TextBox>
|
||||
|
||||
- <xref:System.Windows.Controls.RichTextBox>
|
||||
|
||||
- <xref:System.Windows.Controls.PasswordBox>
|
||||
|
||||
## Media
|
||||
WPF includes integrated support for hosting both audio and video content, as well as [codecs] for most popular image formats.
|
||||
|
||||
- <xref:System.Windows.Controls.Image>
|
||||
|
||||
- <xref:System.Windows.Controls.MediaElement>
|
||||
|
||||
- <xref:System.Windows.Controls.SoundPlayerAction>
|
||||
|
||||
## Digital Ink
|
||||
Digital ink controls provide integrated support for Tablet PC features, such as ink viewing and ink input.
|
||||
|
||||
- <xref:System.Windows.Controls.InkCanvas>
|
||||
|
||||
- <xref:System.Windows.Controls.InkPresenter>
|
||||
|
||||
## See also
|
||||
|
||||
- [Control Library](control-library.md)
|
||||
+253
@@ -0,0 +1,253 @@
|
||||
---
|
||||
title: "Creating a Control That Has a Customizable Appearance"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], customizing"
|
||||
- "VisualStateManager [WPF], managing the state of a control"
|
||||
- "ControlTemplate [WPF], customizing appearance"
|
||||
- "controls [WPF], defining the visual structure and behavior of"
|
||||
- "customizing appearance [WPF], ControlTemplate"
|
||||
- "managing control states [WPF], VisualStateManager"
|
||||
- "VisualStateManager [WPF], best practice"
|
||||
ms.assetid: 9e356d3d-a3d0-4b01-a25f-2d43e4d53fe5
|
||||
---
|
||||
# Creating a Control That Has a Customizable Appearance
|
||||
|
||||
<a name="introduction"></a>
|
||||
[!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] gives you the ability to create a control whose appearance can be customized. For example, you can change the appearance of a <xref:System.Windows.Controls.CheckBox> beyond what setting properties will do by creating a new <xref:System.Windows.Controls.ControlTemplate>. The following illustration shows a <xref:System.Windows.Controls.CheckBox> that uses a default <xref:System.Windows.Controls.ControlTemplate> and a <xref:System.Windows.Controls.CheckBox> that uses a custom <xref:System.Windows.Controls.ControlTemplate>.
|
||||
|
||||

|
||||
A CheckBox that uses the default control template
|
||||
|
||||

|
||||
A CheckBox that uses a custom control template
|
||||
|
||||
If you follow the parts and states model when you create a control, your control's appearance will be customizable. Designer tools such as Blend for Visual Studio support the parts and states model, so when you follow this model your control will be customizable in those types of applications. This topic discusses the parts and states model and how to follow it when you create your own control. This topic uses an example of a custom control, `NumericUpDown`, to illustrate the philosophy of this model. The `NumericUpDown` control displays a numeric value, which a user can increase or decrease by clicking on the control's buttons. The following illustration shows the `NumericUpDown` control that is discussed in this topic.
|
||||
|
||||

|
||||
A custom NumericUpDown control
|
||||
|
||||
This topic contains the following sections:
|
||||
|
||||
- [Prerequisites](#prerequisites)
|
||||
|
||||
- [Parts and States Model](#parts_and_states_model)
|
||||
|
||||
- [Defining the Visual Structure and Visual Behavior of a Control in a ControlTemplate](#defining_the_visual_structure_and_visual_behavior_of_a_control_in_a_controltemplate)
|
||||
|
||||
- [Using Parts of the ControlTemplate in Code](#using_parts_of_the_controltemplate_in_code)
|
||||
|
||||
- [Providing the Control Contract](#providing_the_control_contract)
|
||||
|
||||
- [Complete Example](#complete_example)
|
||||
|
||||
<a name="prerequisites"></a>
|
||||
|
||||
## Prerequisites
|
||||
|
||||
This topic assumes that you know how to create a new <xref:System.Windows.Controls.ControlTemplate> for an existing control, are familiar with what the elements on a control contract are, and understand the concepts discussed in [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template).
|
||||
|
||||
> [!NOTE]
|
||||
> To create a control that can have its appearance customized, you must create a control that inherits from the <xref:System.Windows.Controls.Control> class or one of its subclasses other than <xref:System.Windows.Controls.UserControl>. A control that inherits from <xref:System.Windows.Controls.UserControl> is a control that can be quickly created, but it does not use a <xref:System.Windows.Controls.ControlTemplate> and you cannot customize its appearance.
|
||||
|
||||
<a name="parts_and_states_model"></a>
|
||||
|
||||
## Parts and States Model
|
||||
|
||||
The parts and states model specifies how to define the visual structure and visual behavior of a control. To follow the parts and states model, you should do the following:
|
||||
|
||||
- Define the visual structure and visual behavior in the <xref:System.Windows.Controls.ControlTemplate> of a control.
|
||||
|
||||
- Follow certain best practices when your control's logic interacts with parts of the control template.
|
||||
|
||||
- Provide a control contract to specify what should be included in the <xref:System.Windows.Controls.ControlTemplate>.
|
||||
|
||||
When you define the visual structure and visual behavior in the <xref:System.Windows.Controls.ControlTemplate> of a control, application authors can change the visual structure and visual behavior of your control by creating a new <xref:System.Windows.Controls.ControlTemplate> instead of writing code. You must provide a control contract that tells application authors which <xref:System.Windows.FrameworkElement> objects and states should be defined in the <xref:System.Windows.Controls.ControlTemplate>. You should follow some best practices when you interact with the parts in the <xref:System.Windows.Controls.ControlTemplate> so that your control properly handles an incomplete <xref:System.Windows.Controls.ControlTemplate>. If you follow these three principles, application authors will be able to create a <xref:System.Windows.Controls.ControlTemplate> for your control just as easily as they can for the controls that ship with [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)]. The following section explains each of these recommendations in detail.
|
||||
|
||||
<a name="defining_the_visual_structure_and_visual_behavior_of_a_control_in_a_controltemplate"></a>
|
||||
|
||||
## Defining the Visual Structure and Visual Behavior of a Control in a ControlTemplate
|
||||
|
||||
When you create your custom control by using the parts and states model, you define the control's visual structure and visual behavior in its <xref:System.Windows.Controls.ControlTemplate> instead of in its logic. The visual structure of a control is the composite of <xref:System.Windows.FrameworkElement> objects that make up the control. The visual behavior is the way the control appears when it is in a certain state. For more information about creating a <xref:System.Windows.Controls.ControlTemplate> that specifies the visual structure and visual behavior of a control, see [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template).
|
||||
|
||||
In the example of the `NumericUpDown` control, the visual structure includes two <xref:System.Windows.Controls.Primitives.RepeatButton> controls and a <xref:System.Windows.Controls.TextBlock>. If you add these controls in the code of the `NumericUpDown` control--in its constructor, for example--the positions of those controls would be unalterable. Instead of defining the control's visual structure and visual behavior in its code, you should define it in the <xref:System.Windows.Controls.ControlTemplate>. Then an application developer to customize the position of the buttons and <xref:System.Windows.Controls.TextBlock> and specify what behavior occurs when `Value` is negative because the <xref:System.Windows.Controls.ControlTemplate> can be replaced.
|
||||
|
||||
The following example shows the visual structure of the `NumericUpDown` control, which includes a <xref:System.Windows.Controls.Primitives.RepeatButton> to increase `Value`, a <xref:System.Windows.Controls.Primitives.RepeatButton> to decrease `Value`, and a <xref:System.Windows.Controls.TextBlock> to display `Value`.
|
||||
|
||||
[!code-xaml[VSMCustomControl#VisualStructure](~/samples/snippets/csharp/VS_Snippets_Wpf/vsmcustomcontrol/csharp/window1.xaml#visualstructure)]
|
||||
|
||||
A visual behavior of the `NumericUpDown` control is that the value is in a red font if it is negative. If you change the <xref:System.Windows.Controls.TextBlock.Foreground%2A> of the <xref:System.Windows.Controls.TextBlock> in code when the `Value` is negative, the `NumericUpDown` will always show a red negative value. You specify the visual behavior of the control in the <xref:System.Windows.Controls.ControlTemplate> by adding <xref:System.Windows.VisualState> objects to the <xref:System.Windows.Controls.ControlTemplate>. The following example shows the <xref:System.Windows.VisualState> objects for the `Positive` and `Negative` states. `Positive` and `Negative` are mutually exclusive (the control is always in exactly one of the two), so the example puts the <xref:System.Windows.VisualState> objects into a single <xref:System.Windows.VisualStateGroup>. When the control goes into the `Negative` state, the <xref:System.Windows.Controls.TextBlock.Foreground%2A> of the <xref:System.Windows.Controls.TextBlock> turns red. When the control is in the `Positive` state, the <xref:System.Windows.Controls.TextBlock.Foreground%2A> returns to its original value. Defining <xref:System.Windows.VisualState> objects in a <xref:System.Windows.Controls.ControlTemplate> is further discussed in [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template).
|
||||
|
||||
> [!NOTE]
|
||||
> Be sure to set the <xref:System.Windows.VisualStateManager.VisualStateGroups%2A?displayProperty=nameWithType> attached property on the root <xref:System.Windows.FrameworkElement> of the <xref:System.Windows.Controls.ControlTemplate>.
|
||||
|
||||
[!code-xaml[VSMCustomControl#ValueStates](~/samples/snippets/csharp/VS_Snippets_Wpf/vsmcustomcontrol/csharp/window1.xaml#valuestates)]
|
||||
|
||||
<a name="using_parts_of_the_controltemplate_in_code"></a>
|
||||
|
||||
## Using Parts of the ControlTemplate in Code
|
||||
|
||||
A <xref:System.Windows.Controls.ControlTemplate> author might omit <xref:System.Windows.FrameworkElement> or <xref:System.Windows.VisualState> objects, either purposefully or by mistake, but your control's logic might need those parts to function properly. The parts and states model specifies that your control should be resilient to a <xref:System.Windows.Controls.ControlTemplate> that is missing <xref:System.Windows.FrameworkElement> or <xref:System.Windows.VisualState> objects. Your control should not throw an exception or report an error if a <xref:System.Windows.FrameworkElement>, <xref:System.Windows.VisualState>, or <xref:System.Windows.VisualStateGroup> is missing from the <xref:System.Windows.Controls.ControlTemplate>. This section describes the recommended practices for interacting with <xref:System.Windows.FrameworkElement> objects and managing states.
|
||||
|
||||
### Anticipate Missing FrameworkElement Objects
|
||||
|
||||
When you define <xref:System.Windows.FrameworkElement> objects in the <xref:System.Windows.Controls.ControlTemplate>, your control's logic might need to interact with some of them. For example, the `NumericUpDown` control subscribes to the buttons' <xref:System.Windows.Controls.Primitives.ButtonBase.Click> event to increase or decrease `Value` and sets the <xref:System.Windows.Controls.TextBlock.Text%2A> property of the <xref:System.Windows.Controls.TextBlock> to `Value`. If a custom <xref:System.Windows.Controls.ControlTemplate> omits the <xref:System.Windows.Controls.TextBlock> or buttons, it is acceptable that the control loses some of its functionality, but you should be sure that your control does not cause an error. For example, if a <xref:System.Windows.Controls.ControlTemplate> does not contain the buttons to change `Value`, the `NumericUpDown` loses that functionality, but an application that uses the <xref:System.Windows.Controls.ControlTemplate> will continue to run.
|
||||
|
||||
The following practices will ensure that your control responds properly to missing <xref:System.Windows.FrameworkElement> objects:
|
||||
|
||||
1. Set the `x:Name` attribute for each <xref:System.Windows.FrameworkElement> that you need to reference in code.
|
||||
|
||||
2. Define private properties for each <xref:System.Windows.FrameworkElement> that you need to interact with.
|
||||
|
||||
3. Subscribe to and unsubscribe from any events that your control handles in the <xref:System.Windows.FrameworkElement> property's set accessor.
|
||||
|
||||
4. Set the <xref:System.Windows.FrameworkElement> properties that you defined in step 2 in the <xref:System.Windows.FrameworkElement.OnApplyTemplate%2A> method. This is the earliest that the <xref:System.Windows.FrameworkElement> in the <xref:System.Windows.Controls.ControlTemplate> is available to the control. Use the `x:Name` of the <xref:System.Windows.FrameworkElement> to get it from the <xref:System.Windows.Controls.ControlTemplate>.
|
||||
|
||||
5. Check that the <xref:System.Windows.FrameworkElement> is not `null` before accessing its members. If it is `null`, do not report an error.
|
||||
|
||||
The following examples show how the `NumericUpDown` control interacts with <xref:System.Windows.FrameworkElement> objects in accordance with the recommendations in the preceding list.
|
||||
|
||||
In the example that defines the visual structure of the `NumericUpDown` control in the <xref:System.Windows.Controls.ControlTemplate>, the <xref:System.Windows.Controls.Primitives.RepeatButton> that increases `Value` has its `x:Name` attribute set to `UpButton`. The following example declares a property called `UpButtonElement` that represents the <xref:System.Windows.Controls.Primitives.RepeatButton> that is declared in the <xref:System.Windows.Controls.ControlTemplate>. The `set` accessor first unsubscribes to the button's <xref:System.Windows.Controls.Primitives.ButtonBase.Click> event if `UpDownElement` is not `null`, then it sets the property, and then it subscribes to the <xref:System.Windows.Controls.Primitives.ButtonBase.Click> event. There is also a property defined, but not shown here, for the other <xref:System.Windows.Controls.Primitives.RepeatButton>, called `DownButtonElement`.
|
||||
|
||||
[!code-csharp[VSMCustomControl#UpButtonProperty](~/samples/snippets/csharp/VS_Snippets_Wpf/vsmcustomcontrol/csharp/numericupdown.cs#upbuttonproperty)]
|
||||
[!code-vb[VSMCustomControl#UpButtonProperty](~/samples/snippets/visualbasic/VS_Snippets_Wpf/vsmcustomcontrol/visualbasic/numericupdown.vb#upbuttonproperty)]
|
||||
|
||||
The following example shows the <xref:System.Windows.FrameworkElement.OnApplyTemplate%2A> for the `NumericUpDown` control. The example uses the <xref:System.Windows.FrameworkElement.GetTemplateChild%2A> method to get the <xref:System.Windows.FrameworkElement> objects from the <xref:System.Windows.Controls.ControlTemplate>. Notice that the example guards against cases where <xref:System.Windows.FrameworkElement.GetTemplateChild%2A> finds a <xref:System.Windows.FrameworkElement> with the specified name that is not of the expected type. It is also a best practice to ignore elements that have the specified `x:Name` but are of the wrong type.
|
||||
|
||||
[!code-csharp[VSMCustomControl#ApplyTemplate](~/samples/snippets/csharp/VS_Snippets_Wpf/vsmcustomcontrol/csharp/numericupdown.cs#applytemplate)]
|
||||
[!code-vb[VSMCustomControl#ApplyTemplate](~/samples/snippets/visualbasic/VS_Snippets_Wpf/vsmcustomcontrol/visualbasic/numericupdown.vb#applytemplate)]
|
||||
|
||||
By following the practices that are shown in the previous examples, you ensure that your control will continue to run when the <xref:System.Windows.Controls.ControlTemplate> is missing a <xref:System.Windows.FrameworkElement>.
|
||||
|
||||
### Use the VisualStateManager to Manage States
|
||||
|
||||
The <xref:System.Windows.VisualStateManager> keeps track of the states of a control and performs the logic necessary to transition between states. When you add <xref:System.Windows.VisualState> objects to the <xref:System.Windows.Controls.ControlTemplate>, you add them to a <xref:System.Windows.VisualStateGroup> and add the <xref:System.Windows.VisualStateGroup> to the <xref:System.Windows.VisualStateManager.VisualStateGroups%2A?displayProperty=nameWithType> attached property so that the <xref:System.Windows.VisualStateManager> has access to them.
|
||||
|
||||
The following example repeats the previous example that shows the <xref:System.Windows.VisualState> objects that correspond to the `Positive` and `Negative` states of the control. The <xref:System.Windows.Media.Animation.Storyboard> in the `Negative`<xref:System.Windows.VisualState> turns the <xref:System.Windows.Controls.TextBlock.Foreground%2A> of the <xref:System.Windows.Controls.TextBlock> red. When the `NumericUpDown` control is in the `Negative` state, the storyboard in the `Negative` state begins. Then the <xref:System.Windows.Media.Animation.Storyboard> in the `Negative` state stops when the control returns to the `Positive` state. The `Positive`<xref:System.Windows.VisualState> does not need to contain a <xref:System.Windows.Media.Animation.Storyboard> because when the <xref:System.Windows.Media.Animation.Storyboard> for the `Negative` stops, the <xref:System.Windows.Controls.TextBlock.Foreground%2A> returns to its original color.
|
||||
|
||||
[!code-xaml[VSMCustomControl#ValueStates](~/samples/snippets/csharp/VS_Snippets_Wpf/vsmcustomcontrol/csharp/window1.xaml#valuestates)]
|
||||
|
||||
Note that the <xref:System.Windows.Controls.TextBlock> is given a name, but the <xref:System.Windows.Controls.TextBlock> is not in the control contract for `NumericUpDown` because the control's logic never references the <xref:System.Windows.Controls.TextBlock>. Elements that are referenced in the <xref:System.Windows.Controls.ControlTemplate> have names, but do not need to be part of the control contract because a new <xref:System.Windows.Controls.ControlTemplate> for the control might not need to reference that element. For example, someone who creates a new <xref:System.Windows.Controls.ControlTemplate> for `NumericUpDown` might decide to not indicate that `Value` is negative by changing the <xref:System.Windows.Controls.Control.Foreground%2A>. In that case, neither the code nor the <xref:System.Windows.Controls.ControlTemplate> references the <xref:System.Windows.Controls.TextBlock> by name.
|
||||
|
||||
The control's logic is responsible for changing the control's state. The following example shows that the `NumericUpDown` control calls the <xref:System.Windows.VisualStateManager.GoToState%2A> method to go into the `Positive` state when `Value` is 0 or greater, and the `Negative` state when `Value` is less than 0.
|
||||
|
||||
[!code-csharp[VSMCustomControl#ValueStateChange](~/samples/snippets/csharp/VS_Snippets_Wpf/vsmcustomcontrol/csharp/numericupdown.cs#valuestatechange)]
|
||||
[!code-vb[VSMCustomControl#ValueStateChange](~/samples/snippets/visualbasic/VS_Snippets_Wpf/vsmcustomcontrol/visualbasic/numericupdown.vb#valuestatechange)]
|
||||
|
||||
The <xref:System.Windows.VisualStateManager.GoToState%2A> method performs the logic necessary to start and stop the storyboards appropriately. When a control calls <xref:System.Windows.VisualStateManager.GoToState%2A> to change its state, the <xref:System.Windows.VisualStateManager> does the following:
|
||||
|
||||
- If the <xref:System.Windows.VisualState> that the control is going to has a <xref:System.Windows.Media.Animation.Storyboard>, the storyboard begins. Then, if the <xref:System.Windows.VisualState> that the control is coming from has a <xref:System.Windows.Media.Animation.Storyboard>, the storyboard ends.
|
||||
|
||||
- If the control is already in the state that is specified, <xref:System.Windows.VisualStateManager.GoToState%2A> takes no action and returns `true`.
|
||||
|
||||
- If state that is specified doesn't exist in the <xref:System.Windows.Controls.ControlTemplate> of `control`, <xref:System.Windows.VisualStateManager.GoToState%2A> takes no action and returns `false`.
|
||||
|
||||
#### Best Practices for Working with the VisualStateManager
|
||||
|
||||
It is recommended that you do the following to maintain your control's states:
|
||||
|
||||
- Use properties to track its state.
|
||||
|
||||
- Create a helper method to transition between states.
|
||||
|
||||
The `NumericUpDown` control uses its `Value` property to track whether it is in the `Positive` or `Negative` state. The `NumericUpDown` control also defines the `Focused` and `UnFocused` states, which tracks the <xref:System.Windows.UIElement.IsFocused%2A> property. If you use states that do not naturally correspond to a property of the control, you can define a private property to track the state.
|
||||
|
||||
A single method that updates all the states centralizes calls to the <xref:System.Windows.VisualStateManager> and keeps your code manageable. The following example shows the `NumericUpDown` control's helper method, `UpdateStates`. When `Value` is greater than or equal to 0, the <xref:System.Windows.Controls.Control> is in the `Positive` state. When `Value` is less than 0, the control is in the `Negative` state. When <xref:System.Windows.UIElement.IsFocused%2A> is `true`, the control is in the `Focused` state; otherwise, it is in the `Unfocused` state. The control can call `UpdateStates` whenever it needs to change its state, regardless of what state changes.
|
||||
|
||||
[!code-csharp[VSMCustomControl#UpdateStates](~/samples/snippets/csharp/VS_Snippets_Wpf/vsmcustomcontrol/csharp/numericupdown.cs#updatestates)]
|
||||
[!code-vb[VSMCustomControl#UpdateStates](~/samples/snippets/visualbasic/VS_Snippets_Wpf/vsmcustomcontrol/visualbasic/numericupdown.vb#updatestates)]
|
||||
|
||||
If you pass a state name to <xref:System.Windows.VisualStateManager.GoToState%2A> when the control is already in that state, <xref:System.Windows.VisualStateManager.GoToState%2A> does nothing, so you don't need to check for the control's current state. For example, if `Value` changes from one negative number to another negative number, the storyboard for the `Negative` state is not interrupted and the user will not see a change in the control.
|
||||
|
||||
The <xref:System.Windows.VisualStateManager> uses <xref:System.Windows.VisualStateGroup> objects to determine which state to exit when you call <xref:System.Windows.VisualStateManager.GoToState%2A>. The control is always in one state for each <xref:System.Windows.VisualStateGroup> that is defined in its <xref:System.Windows.Controls.ControlTemplate> and only leaves a state when it goes into another state from the same <xref:System.Windows.VisualStateGroup>. For example, the <xref:System.Windows.Controls.ControlTemplate> of the `NumericUpDown` control defines the `Positive` and `Negative`<xref:System.Windows.VisualState> objects in one <xref:System.Windows.VisualStateGroup> and the `Focused` and `Unfocused`<xref:System.Windows.VisualState> objects in another. (You can see the `Focused` and `Unfocused`<xref:System.Windows.VisualState> defined in the [Complete Example](#complete_example) section in this topic When the control goes from the `Positive` state to the `Negative` state, or vice versa, the control remains in either the `Focused` or `Unfocused` state.
|
||||
|
||||
There are three typical places where the state of a control might change:
|
||||
|
||||
- When the <xref:System.Windows.Controls.ControlTemplate> is applied to the <xref:System.Windows.Controls.Control>.
|
||||
|
||||
- When a property changes.
|
||||
|
||||
- When an event occurs.
|
||||
|
||||
The following examples demonstrate updating the state of the `NumericUpDown` control in these cases.
|
||||
|
||||
You should update the state of the control in the <xref:System.Windows.FrameworkElement.OnApplyTemplate%2A> method so that the control appears in the correct state when the <xref:System.Windows.Controls.ControlTemplate> is applied. The following example calls `UpdateStates` in <xref:System.Windows.FrameworkElement.OnApplyTemplate%2A> to ensure that the control is in the appropriate states. For example, suppose that you create a `NumericUpDown` control, and then set its <xref:System.Windows.Controls.Control.Foreground%2A> to green and `Value` to -5. If you do not call `UpdateStates` when the <xref:System.Windows.Controls.ControlTemplate> is applied to the `NumericUpDown` control, the control is not in the `Negative` state and the value is green instead of red. You must call `UpdateStates` to put the control in the `Negative` state.
|
||||
|
||||
[!code-csharp[VSMCustomControl#ApplyTemplate](~/samples/snippets/csharp/VS_Snippets_Wpf/vsmcustomcontrol/csharp/numericupdown.cs#applytemplate)]
|
||||
[!code-vb[VSMCustomControl#ApplyTemplate](~/samples/snippets/visualbasic/VS_Snippets_Wpf/vsmcustomcontrol/visualbasic/numericupdown.vb#applytemplate)]
|
||||
|
||||
You often need to update the states of a control when a property changes. The following example shows the entire `ValueChangedCallback` method. Because `ValueChangedCallback` is called when `Value` changes, the method calls `UpdateStates` in case `Value` changed from positive to negative or vice versa. It is acceptable to call `UpdateStates` when `Value` changes but remains positive or negative because in that case, the control will not change states.
|
||||
|
||||
[!code-csharp[VSMCustomControl#EntireValueChangedCallback](~/samples/snippets/csharp/VS_Snippets_Wpf/vsmcustomcontrol/csharp/numericupdown.cs#entirevaluechangedcallback)]
|
||||
[!code-vb[VSMCustomControl#EntireValueChangedCallback](~/samples/snippets/visualbasic/VS_Snippets_Wpf/vsmcustomcontrol/visualbasic/numericupdown.vb#entirevaluechangedcallback)]
|
||||
|
||||
You might also need to update states when an event occurs. The following example shows that the `NumericUpDown` calls `UpdateStates` on the <xref:System.Windows.Controls.Control> to handle the <xref:System.Windows.UIElement.GotFocus> event.
|
||||
|
||||
[!code-csharp[VSMCustomControl#OnGotFocus](~/samples/snippets/csharp/VS_Snippets_Wpf/vsmcustomcontrol/csharp/numericupdown.cs#ongotfocus)]
|
||||
[!code-vb[VSMCustomControl#OnGotFocus](~/samples/snippets/visualbasic/VS_Snippets_Wpf/vsmcustomcontrol/visualbasic/numericupdown.vb#ongotfocus)]
|
||||
|
||||
The <xref:System.Windows.VisualStateManager> helps you manage your control's states. By using the <xref:System.Windows.VisualStateManager>, you ensure that your control correctly transitions between states. If you follow the recommendations described in this section for working with the <xref:System.Windows.VisualStateManager>, your control's code will remain readable and maintainable.
|
||||
|
||||
<a name="providing_the_control_contract"></a>
|
||||
|
||||
## Providing the Control Contract
|
||||
|
||||
You provide a control contract so that <xref:System.Windows.Controls.ControlTemplate> authors will know what to put in the template. A control contract has three elements:
|
||||
|
||||
- The visual elements that the control's logic uses.
|
||||
|
||||
- The states of the control and the group each state belongs to.
|
||||
|
||||
- The public properties that visually affect the control.
|
||||
|
||||
Someone that creates a new <xref:System.Windows.Controls.ControlTemplate> needs to know what <xref:System.Windows.FrameworkElement> objects the control's logic uses, what type each object is, and what its name is. A <xref:System.Windows.Controls.ControlTemplate> author also needs to know the name of each possible state the control can be in, and which <xref:System.Windows.VisualStateGroup> the state is in.
|
||||
|
||||
Returning to the `NumericUpDown` example, the control expects the <xref:System.Windows.Controls.ControlTemplate> to have the following <xref:System.Windows.FrameworkElement> objects:
|
||||
|
||||
- A <xref:System.Windows.Controls.Primitives.RepeatButton> called `UpButton`.
|
||||
|
||||
- A <xref:System.Windows.Controls.Primitives.RepeatButton> called `DownButton.`
|
||||
|
||||
The control can be in the following states:
|
||||
|
||||
- In the `ValueStates`<xref:System.Windows.VisualStateGroup>
|
||||
|
||||
- `Positive`
|
||||
|
||||
- `Negative`
|
||||
|
||||
- In the `FocusStates`<xref:System.Windows.VisualStateGroup>
|
||||
|
||||
- `Focused`
|
||||
|
||||
- `Unfocused`
|
||||
|
||||
To specify what <xref:System.Windows.FrameworkElement> objects the control expects, you use the <xref:System.Windows.TemplatePartAttribute>, which specifies the name and type of the expected elements. To specify the possible states of a control, you use the <xref:System.Windows.TemplateVisualStateAttribute>, which specifies the state's name and which <xref:System.Windows.VisualStateGroup> it belongs to. Put the <xref:System.Windows.TemplatePartAttribute> and <xref:System.Windows.TemplateVisualStateAttribute> on the class definition of the control.
|
||||
|
||||
Any public property that affects the appearance of your control is also a part of the control contract.
|
||||
|
||||
The following example specifies the <xref:System.Windows.FrameworkElement> object and states for the `NumericUpDown` control.
|
||||
|
||||
[!code-csharp[VSMCustomControl#ControlContract](~/samples/snippets/csharp/VS_Snippets_Wpf/vsmcustomcontrol/csharp/numericupdown.cs#controlcontract)]
|
||||
[!code-vb[VSMCustomControl#ControlContract](~/samples/snippets/visualbasic/VS_Snippets_Wpf/vsmcustomcontrol/visualbasic/numericupdown.vb#controlcontract)]
|
||||
|
||||
<a name="complete_example"></a>
|
||||
|
||||
## Complete Example
|
||||
|
||||
The following example is the entire <xref:System.Windows.Controls.ControlTemplate> for the `NumericUpDown` control.
|
||||
|
||||
[!code-xaml[VSMCustomControl#NUDTemplate](~/samples/snippets/csharp/VS_Snippets_Wpf/vsmcustomcontrol/csharp/themes/generic.xaml#nudtemplate)]
|
||||
|
||||
The following example shows the logic for the `NumericUpDown`.
|
||||
|
||||
[!code-csharp[VSMCustomControl#ControlLogic](~/samples/snippets/csharp/VS_Snippets_Wpf/vsmcustomcontrol/csharp/numericupdown.cs#controllogic)]
|
||||
[!code-vb[VSMCustomControl#ControlLogic](~/samples/snippets/visualbasic/VS_Snippets_Wpf/vsmcustomcontrol/visualbasic/numericupdown.vb#controllogic)]
|
||||
|
||||
## See also
|
||||
|
||||
- [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template)
|
||||
- [Control Customization](control-customization.md)
|
||||
@@ -0,0 +1,174 @@
|
||||
---
|
||||
title: "DataGrid Styles and Templates"
|
||||
description: Learn about styles and templates for the Windows Presentation Foundation DataGrid control. Modify the ControlTemplate to give the control a unique appearance.
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "states [WPF], DataGrid"
|
||||
- "ControlTemplate [WPF], DataGrid"
|
||||
- "DataGrid [WPF], styles and templates"
|
||||
- "templates [WPF], DataGrid"
|
||||
- "styles [WPF], DataGrid"
|
||||
- "parts [WPF], DataGrid"
|
||||
ms.assetid: 9cb31d63-f148-4d25-b079-816e73f988c7
|
||||
---
|
||||
# DataGrid Styles and Templates
|
||||
This topic describes the styles and templates for the <xref:System.Windows.Controls.DataGrid> control. You can modify the default <xref:System.Windows.Controls.ControlTemplate> to give the control a unique appearance. For more information, see [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template).
|
||||
|
||||
## DataGrid Parts
|
||||
The following table lists the named parts for the <xref:System.Windows.Controls.DataGrid> control.
|
||||
|
||||
|Part|Type|Description|
|
||||
|-|-|-|
|
||||
|PART_ColumnHeadersPresenter|<xref:System.Windows.Controls.Primitives.DataGridColumnHeadersPresenter>|The row that contains the column headers.|
|
||||
|
||||
When you create a <xref:System.Windows.Controls.ControlTemplate> for a <xref:System.Windows.Controls.DataGrid>, your template might contain an <xref:System.Windows.Controls.ItemsPresenter> within a <xref:System.Windows.Controls.ScrollViewer>. (The <xref:System.Windows.Controls.ItemsPresenter> displays each item in the <xref:System.Windows.Controls.DataGrid>; the <xref:System.Windows.Controls.ScrollViewer> enables scrolling within the control). If the <xref:System.Windows.Controls.ItemsPresenter> is not the direct child of the <xref:System.Windows.Controls.ScrollViewer>, you must give the <xref:System.Windows.Controls.ItemsPresenter> the name, `ItemsPresenter`.
|
||||
|
||||
The default template for the <xref:System.Windows.Controls.DataGrid> contains a <xref:System.Windows.Controls.ScrollViewer> control. For more information about the parts defined by the <xref:System.Windows.Controls.ScrollViewer>, see [ScrollViewer Styles and Templates](scrollviewer-styles-and-templates.md).
|
||||
|
||||
## DataGrid States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.DataGrid> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Normal|CommonStates|The default state.|
|
||||
|Disabled|CommonStates|The control is disabled.|
|
||||
|InvalidFocused|ValidationStates|The control is not valid and has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The control is not valid and does not have focus.|
|
||||
|Valid|ValidationStates|The control is valid.|
|
||||
|
||||
## DataGridCell Parts
|
||||
The <xref:System.Windows.Controls.DataGridCell> element does not have any named parts.
|
||||
|
||||
## DataGridCell States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.DataGridCell> element.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Normal|CommonStates|The default state.|
|
||||
|MouseOver|CommonStates|The mouse pointer is positioned over the cell.|
|
||||
|Focused|FocusStates|The cell has focus.|
|
||||
|Unfocused|FocusStates|The cell does not have focus|
|
||||
|Current|CurrentStates|The cell is the current cell.|
|
||||
|Regular|CurrentStates|The cell is not the current cell.|
|
||||
|Display|InteractionStates|The cell is in display mode.|
|
||||
|Editing|InteractionStates|The cell is in edit mode.|
|
||||
|Selected|SelectionStates|The cell is selected.|
|
||||
|Unselected|SelectionStates|The cell is not selected.|
|
||||
|InvalidFocused|ValidationStates|The cell is not valid and has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The cell is not valid and does not have focus.|
|
||||
|Valid|ValidationStates|The cell is valid.|
|
||||
|
||||
## DataGridRow Parts
|
||||
The <xref:System.Windows.Controls.DataGridRow> element does not have any named parts.
|
||||
|
||||
## DataGridRow States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.DataGridRow> element.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Normal|CommonStates|The default state.|
|
||||
|MouseOver|CommonStates|The mouse pointer is positioned over the row.|
|
||||
|MouseOver_Editing|CommonStates|The mouse pointer is positioned over the row and the row is in edit mode.|
|
||||
|MouseOver_Selected|CommonStates|The mouse pointer is positioned over the row and the row is selected.|
|
||||
|MouseOver_Unfocused_Editing|CommonStates|The mouse pointer is positioned over the row, the row is in edit mode, and does not have focus.|
|
||||
|MouseOver_Unfocused_Selected|CommonStates|The mouse pointer is positioned over the row, the row is selected, and does not have focus.|
|
||||
|Normal_AlternatingRow|CommonStates|The row is an alternating row.|
|
||||
|Normal_Editing|CommonStates|The row is in edit mode.|
|
||||
|Normal_Selected|CommonStates|The row is selected.|
|
||||
|Unfocused_Editing|CommonStates|The row is in edit mode and does not have focus.|
|
||||
|Unfocused_Selected|CommonStates|The row is selected and does not have focus.|
|
||||
|InvalidFocused|ValidationStates|The control is not valid and has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The control is not valid and does not have focus.|
|
||||
|Valid|ValidationStates|The control is valid.|
|
||||
|
||||
## DataGridRowHeader Parts
|
||||
The following table lists the named parts for the <xref:System.Windows.Controls.Primitives.DataGridRowHeader> element.
|
||||
|
||||
|Part|Type|Description|
|
||||
|-|-|-|
|
||||
|PART_TopHeaderGripper|<xref:System.Windows.Controls.Primitives.Thumb>|The element that is used to resize the row header from the top.|
|
||||
|PART_BottomHeaderGripper|<xref:System.Windows.Controls.Primitives.Thumb>|The element that is used to resize the row header from the bottom.|
|
||||
|
||||
## DataGridRowHeader States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.Primitives.DataGridRowHeader> element.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Normal|CommonStates|The default state.|
|
||||
|MouseOver|CommonStates|The mouse pointer is positioned over the row.|
|
||||
|MouseOver_CurrentRow|CommonStates|The mouse pointer is positioned over the row and the row is the current row.|
|
||||
|MouseOver_CurrentRow_Selected|CommonStates|The mouse pointer is positioned over the row, and the row is current and selected.|
|
||||
|MouseOver_EditingRow|CommonStates|The mouse pointer is positioned over the row and the row is in edit mode.|
|
||||
|MouseOver_Selected|CommonStates|The mouse pointer is positioned over the row and the row is selected.|
|
||||
|MouseOver_Unfocused_CurrentRow_Selected|CommonStates|The mouse pointer is positioned over the row, the row is current and selected, and does not have focus.|
|
||||
|MouseOver_Unfocused_EditingRow|CommonStates|The mouse pointer is positioned over the row, the row is in edit mode, and does not have focus.|
|
||||
|MouseOver_Unfocused_Selected|CommonStates|The mouse pointer is positioned over the row, the row is selected, and does not have focus.|
|
||||
|Normal_CurrentRow|CommonStates|The row is the current row.|
|
||||
|Normal_CurrentRow_Selected|CommonStates|The row is the current row and is selected.|
|
||||
|Normal_EditingRow|CommonStates|The row is in edit mode.|
|
||||
|Normal_Selected|CommonStates|The row is selected.|
|
||||
|Unfocused_CurrentRow_Selected|CommonStates|The row is the current row, is selected, and does not have focus.|
|
||||
|Unfocused_EditingRow|CommonStates|The row is in edit mode and does not have focus.|
|
||||
|Unfocused_Selected|CommonStates|The row is selected and does not have focus.|
|
||||
|InvalidFocused|ValidationStates|The control is not valid and has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The control is not valid and does not have focus.|
|
||||
|Valid|ValidationStates|The control is valid.|
|
||||
|
||||
## DataGridColumnHeadersPresenter Parts
|
||||
The following table lists the named parts for the <xref:System.Windows.Controls.Primitives.DataGridColumnHeadersPresenter> element.
|
||||
|
||||
|Part|Type|Description|
|
||||
|-|-|-|
|
||||
|PART_FillerColumnHeader|<xref:System.Windows.Controls.Primitives.DataGridColumnHeader>|The placeholder for column headers.|
|
||||
|
||||
## DataGridColumnHeadersPresenter States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.Primitives.DataGridColumnHeadersPresenter> element.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|InvalidFocused|ValidationStates|The cell is not valid and has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The cell is not valid and does not have focus.|
|
||||
|Valid|ValidationStates|The cell is valid.|
|
||||
|
||||
## DataGridColumnHeader Parts
|
||||
The following table lists the named parts for the <xref:System.Windows.Controls.Primitives.DataGridColumnHeader> element.
|
||||
|
||||
|Part|Type|Description|
|
||||
|-|-|-|
|
||||
|PART_LeftHeaderGripper|<xref:System.Windows.Controls.Primitives.Thumb>|The element that is used to resize the column header from the left.|
|
||||
|PART_RightHeaderGripper|<xref:System.Windows.Controls.Primitives.Thumb>|The element that is used to resize the column header from the right.|
|
||||
|
||||
## DataGridColumnHeader States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.Primitives.DataGridColumnHeader> element.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Normal|CommonStates|The default state.|
|
||||
|MouseOver|CommonStates|The mouse pointer is positioned over the control.|
|
||||
|Pressed|CommonStates|The control is pressed.|
|
||||
|SortAscending|SortStates|The column is sorted in ascending order.|
|
||||
|SortDescending|SortStates|The column is sorted in descending order.|
|
||||
|Unsorted|SortStates|The column is not sorted.|
|
||||
|InvalidFocused|ValidationStates|The control is not valid and has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The control is not valid and does not have focus.|
|
||||
|Valid|ValidationStates|The control is valid.|
|
||||
|
||||
## DataGrid ControlTemplate Example
|
||||
The following example shows how to define a <xref:System.Windows.Controls.ControlTemplate> for the <xref:System.Windows.Controls.DataGrid> control and its associated types.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#DataGrid](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/datagrid.xaml#datagrid)]
|
||||
|
||||
The preceding example uses one or more of the following resources.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#Resources](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/shared.xaml#resources)]
|
||||
|
||||
For the complete sample, see [Styling with ControlTemplates Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Styles%20&%20Templates/IntroToStylingAndTemplating).
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.FrameworkElement.Style%2A>
|
||||
- <xref:System.Windows.Controls.ControlTemplate>
|
||||
- [Control Styles and Templates](control-styles-and-templates.md)
|
||||
- [Control Customization](control-customization.md)
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
- [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template)
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: "DataGrid"
|
||||
description: Learn how the DataGrid control lets you display and edit data from different sources, such as a database, LINQ query, or any other bindable data source.
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "DataGrid column types [WPF]"
|
||||
- "DataGrid scenarios [WPF]"
|
||||
- "DataGrid control [WPF]"
|
||||
- "controls [WPF], DataGrid"
|
||||
- "DataGrid [WPF], common tasks for"
|
||||
- "DataGrid [WPF], customizing the appearance of"
|
||||
- "DataGrid columns [WPF], using"
|
||||
ms.assetid: bf89ea63-79b6-422b-bc9f-0485ad803216
|
||||
---
|
||||
# DataGrid
|
||||
The <xref:System.Windows.Controls.DataGrid> control enables you to display and edit data from many different sources, such as from a SQL database, LINQ query, or any other bindable data source. For more information, see [Binding Sources Overview](../data/binding-sources-overview.md).
|
||||
|
||||
Columns can display text, controls, such as a <xref:System.Windows.Controls.ComboBox>, or any other WPF content, such as images, buttons, or any content contained in a template. You can use a <xref:System.Windows.Controls.DataGridTemplateColumn> to display data defined in a template. The following table lists the column types that are provided by default.
|
||||
|
||||
|Generated Column Type|Data Type|
|
||||
|---------------------------|---------------|
|
||||
|<xref:System.Windows.Controls.DataGridTextColumn>|<xref:System.String>|
|
||||
|<xref:System.Windows.Controls.DataGridCheckBoxColumn>|<xref:System.Boolean>|
|
||||
|<xref:System.Windows.Controls.DataGridComboBoxColumn>|<xref:System.Enum>|
|
||||
|<xref:System.Windows.Controls.DataGridHyperlinkColumn>|<xref:System.Uri>|
|
||||
|
||||
<xref:System.Windows.Controls.DataGrid> can be customized in appearance, such as cell font, color, and size. <xref:System.Windows.Controls.DataGrid> supports all styling and templating functionality of other WPF controls. <xref:System.Windows.Controls.DataGrid> also includes default and customizable behaviors for editing, sorting, and validation.
|
||||
|
||||
The following table lists some of the common tasks for <xref:System.Windows.Controls.DataGrid> and how to accomplish them. By viewing the related API, you can find more information and sample code.
|
||||
|
||||
|Scenario|Approach|
|
||||
|--------------|--------------|
|
||||
|Alternating background colors|Set the <xref:System.Windows.Controls.ItemsControl.AlternationIndex%2A> property to 2 or more, and then assign a <xref:System.Windows.Media.Brush> to the <xref:System.Windows.Controls.DataGrid.RowBackground%2A> and <xref:System.Windows.Controls.DataGrid.AlternatingRowBackground%2A> properties.|
|
||||
|Define cell and row selection behavior|Set the <xref:System.Windows.Controls.DataGrid.SelectionMode%2A> and <xref:System.Windows.Controls.DataGrid.SelectionUnit%2A> properties.|
|
||||
|Customize the visual appearance of headers, cells, and rows|Apply a new <xref:System.Windows.Style> to the <xref:System.Windows.Controls.DataGrid.ColumnHeaderStyle%2A>, <xref:System.Windows.Controls.DataGrid.RowHeaderStyle%2A>, <xref:System.Windows.Controls.DataGrid.CellStyle%2A>, or <xref:System.Windows.Controls.DataGrid.RowStyle%2A> properties.|
|
||||
|Set sizing options|Set the <xref:System.Windows.FrameworkElement.Height%2A>, <xref:System.Windows.FrameworkElement.MaxHeight%2A>, <xref:System.Windows.FrameworkElement.MinHeight%2A>, <xref:System.Windows.FrameworkElement.Width%2A>, <xref:System.Windows.FrameworkElement.MaxWidth%2A>, or <xref:System.Windows.FrameworkElement.MinWidth%2A> properties. For more information, see [Sizing Options in the DataGrid Control](sizing-options-in-the-datagrid-control.md).|
|
||||
|Access selected items|Check the <xref:System.Windows.Controls.DataGrid.SelectedCells%2A> property to get the selected cells and the <xref:System.Windows.Controls.Primitives.MultiSelector.SelectedItems%2A> property to get the selected rows. For more information, see <xref:System.Windows.Controls.DataGrid.SelectedCells%2A>.|
|
||||
|Customize end-user interactions|Set the <xref:System.Windows.Controls.DataGrid.CanUserAddRows%2A>, <xref:System.Windows.Controls.DataGrid.CanUserDeleteRows%2A>, <xref:System.Windows.Controls.DataGrid.CanUserReorderColumns%2A>, <xref:System.Windows.Controls.DataGrid.CanUserResizeColumns%2A>, <xref:System.Windows.Controls.DataGrid.CanUserResizeRows%2A>, and <xref:System.Windows.Controls.DataGrid.CanUserSortColumns%2A> properties.|
|
||||
|Cancel or change auto-generated columns|Handle the <xref:System.Windows.Controls.DataGrid.AutoGeneratingColumn> event.|
|
||||
|Freeze a column|Set the <xref:System.Windows.Controls.DataGrid.FrozenColumnCount%2A> property to 1 and move the column to the left-most position by setting the <xref:System.Windows.Controls.DataGridColumn.DisplayIndex%2A> property to 0.|
|
||||
|Use XML data as the data source|Bind the <xref:System.Windows.Controls.ItemsControl.ItemsSource%2A> on the <xref:System.Windows.Controls.DataGrid> to the XPath query that represents the collection of items. Create each column in the <xref:System.Windows.Controls.DataGrid>. Bind each column by setting the XPath on the binding to the query that gets the property on the item source. For an example, see <xref:System.Windows.Controls.DataGridTextColumn>.|
|
||||
|
||||
## Related Topics
|
||||
|
||||
|Title|Description|
|
||||
|-----------|-----------------|
|
||||
|[Walkthrough: Display Data from a SQL Server Database in a DataGrid Control](walkthrough-display-data-from-a-sql-server-database-in-a-datagrid-control.md)|Describes how to set up a new WPF project, add an Entity Framework Element, set the source, and display the data in a <xref:System.Windows.Controls.DataGrid>.|
|
||||
|[How to: Add Row Details to a DataGrid Control](how-to-add-row-details-to-a-datagrid-control.md)|Describes how to create row details for a <xref:System.Windows.Controls.DataGrid>.|
|
||||
|[How to: Implement Validation with the DataGrid Control](how-to-implement-validation-with-the-datagrid-control.md)|Describes how to validate values in <xref:System.Windows.Controls.DataGrid> cells and rows, and display validation feedback.|
|
||||
|[Default Keyboard and Mouse Behavior in the DataGrid Control](default-keyboard-and-mouse-behavior-in-the-datagrid-control.md)|Describes how to interact with the <xref:System.Windows.Controls.DataGrid> control by using the keyboard and mouse.|
|
||||
|[How to: Group, Sort, and Filter Data in the DataGrid Control](how-to-group-sort-and-filter-data-in-the-datagrid-control.md)|Describes how to view data in a <xref:System.Windows.Controls.DataGrid> in different ways by grouping, sorting, and filtering the data.|
|
||||
|[Sizing Options in the DataGrid Control](sizing-options-in-the-datagrid-control.md)|Describes how to control absolute and automatic sizing in the <xref:System.Windows.Controls.DataGrid>.|
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.DataGrid>
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
- [Data Binding Overview](/dotnet/desktop-wpf/data/data-binding-overview)
|
||||
- [Data Templating Overview](../data/data-templating-overview.md)
|
||||
- [Controls](index.md)
|
||||
- [WPF Content Model](wpf-content-model.md)
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
title: "DatePicker Styles and Templates"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "ControlTemplate [WPF], DatePicker"
|
||||
- "DatePicker [WPF], styles and templates"
|
||||
- "templates [WPF], DatePicker"
|
||||
- "parts [WPF], DatePicker"
|
||||
- "styles [WPF], DatePicker"
|
||||
- "states [WPF], DatePicker"
|
||||
ms.assetid: c430a657-692f-44bd-a549-2341f92d6115
|
||||
---
|
||||
# DatePicker Styles and Templates
|
||||
This topic describes the styles and templates for the <xref:System.Windows.Controls.DatePicker> control. You can modify the default <xref:System.Windows.Controls.ControlTemplate> to give the control a unique appearance. For more information, see [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template).
|
||||
|
||||
## DatePicker Parts
|
||||
The following table lists the named parts for the <xref:System.Windows.Controls.DatePicker> control.
|
||||
|
||||
|Part|Type|Description|
|
||||
|-|-|-|
|
||||
|PART_Root|<xref:System.Windows.Controls.Grid>|The root of the control.|
|
||||
|PART_Button|<xref:System.Windows.Controls.Button>|The button that opens and closes the <xref:System.Windows.Controls.Calendar>.|
|
||||
|PART_TextBox|<xref:System.Windows.Controls.Primitives.DatePickerTextBox>|The text box that allows you to input a date.|
|
||||
|PART_Popup|<xref:System.Windows.Controls.Primitives.Popup>|The popup for the <xref:System.Windows.Controls.DatePicker> control.|
|
||||
|
||||
## DatePicker States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.DatePicker> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Normal|CommonStates|The default state.|
|
||||
|Disabled|CommonStates|The <xref:System.Windows.Controls.DatePicker> is disabled.|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control does not have focus.|
|
||||
|
||||
## DatePickerTextBox Parts
|
||||
The following table lists the named parts for the <xref:System.Windows.Controls.Primitives.DatePickerTextBox> control.
|
||||
|
||||
|Part|Type|Description|
|
||||
|-|-|-|
|
||||
|PART_Watermark|<xref:System.Windows.Controls.ContentControl>|The element that contains the initial text in the <xref:System.Windows.Controls.DatePicker>.|
|
||||
|PART_ContentElement|<xref:System.Windows.FrameworkElement>|A visual element that can contain a <xref:System.Windows.FrameworkElement>. The text of the <xref:System.Windows.Controls.TextBox> is displayed in this element.|
|
||||
|
||||
## DatePickerTextBox States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.Primitives.DatePickerTextBox> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Normal|CommonStates|The default state.|
|
||||
|Disabled|CommonStates|The <xref:System.Windows.Controls.Primitives.DatePickerTextBox> is disabled.|
|
||||
|MouseOver|CommonStates|The mouse pointer is positioned over the <xref:System.Windows.Controls.Primitives.DatePickerTextBox>.|
|
||||
|ReadOnly|CommonStates|The user cannot change the text in the <xref:System.Windows.Controls.Primitives.DatePickerTextBox>.|
|
||||
|Focused|FocusStates|The control has focus.|
|
||||
|Unfocused|FocusStates|The control does not have focus.|
|
||||
|Watermarked|WatermarkStates|The control displays its initial text. The <xref:System.Windows.Controls.Primitives.DatePickerTextBox> is in the state when the user has not entered text or selected a date.|
|
||||
|Unwatermarked|WatermarkStates|The user has entered text into the <xref:System.Windows.Controls.Primitives.DatePickerTextBox> or selected a date in the <xref:System.Windows.Controls.DatePicker>.|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` and the control has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` and the control does not have focus.|
|
||||
|
||||
## DatePicker ControlTemplate Example
|
||||
The following example shows how to define a <xref:System.Windows.Controls.ControlTemplate> for the <xref:System.Windows.Controls.DatePicker> control.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#DatePicker](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/datepicker.xaml#datepicker)]
|
||||
|
||||
The preceding example uses one or more of the following resources.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#Resources](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/shared.xaml#resources)]
|
||||
|
||||
For the complete sample, see [Styling with ControlTemplates Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Styles%20&%20Templates/IntroToStylingAndTemplating).
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.FrameworkElement.Style%2A>
|
||||
- <xref:System.Windows.Controls.ControlTemplate>
|
||||
- [Control Styles and Templates](control-styles-and-templates.md)
|
||||
- [Control Customization](control-customization.md)
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
- [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template)
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
title: "DatePicker"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], DatePicker"
|
||||
- "DatePicker control [WPF]"
|
||||
ms.assetid: 619765c8-8d25-4315-aec2-79aea08fed9f
|
||||
---
|
||||
# DatePicker
|
||||
The <xref:System.Windows.Controls.DatePicker> control allows the user to select a date by either typing it into a text field or by using a drop-down <xref:System.Windows.Controls.Calendar> control.
|
||||
|
||||
The following illustration shows a <xref:System.Windows.Controls.DatePicker>.
|
||||
|
||||

|
||||
DatePicker Control
|
||||
|
||||
Many of a <xref:System.Windows.Controls.DatePicker> control's properties are for managing its built-in <xref:System.Windows.Controls.Calendar>, and function identically to the equivalent property in <xref:System.Windows.Controls.Calendar>. In particular, the <xref:System.Windows.Controls.DatePicker.IsTodayHighlighted%2A?displayProperty=nameWithType>, <xref:System.Windows.Controls.DatePicker.FirstDayOfWeek%2A?displayProperty=nameWithType>, <xref:System.Windows.Controls.DatePicker.BlackoutDates%2A?displayProperty=nameWithType>, <xref:System.Windows.Controls.DatePicker.DisplayDateStart%2A?displayProperty=nameWithType>, <xref:System.Windows.Controls.DatePicker.DisplayDateEnd%2A?displayProperty=nameWithType>, <xref:System.Windows.Controls.DatePicker.DisplayDate%2A?displayProperty=nameWithType>, and <xref:System.Windows.Controls.DatePicker.SelectedDate%2A?displayProperty=nameWithType> properties function identically to their <xref:System.Windows.Controls.Calendar> counterparts. For more information, see <xref:System.Windows.Controls.Calendar>.
|
||||
|
||||
Users can type a date directly into a text field, which sets the <xref:System.Windows.Controls.DatePicker.Text%2A> property. If the <xref:System.Windows.Controls.DatePicker> cannot convert the entered string to a valid date, the <xref:System.Windows.Controls.DatePicker.DateValidationError> event will be raised. By default, this causes an exception, but an event handler for <xref:System.Windows.Controls.DatePicker.DateValidationError> can set the <xref:System.Windows.Controls.DatePickerDateValidationErrorEventArgs.ThrowException%2A> property to `false` and prevent an exception from being raised.
|
||||
|
||||
## See also
|
||||
|
||||
- [Controls](index.md)
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
+96
@@ -0,0 +1,96 @@
|
||||
---
|
||||
title: "Default Keyboard and Mouse Behavior in the DataGrid Control"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "DataGrid [WPF], keyboard behavior"
|
||||
- "DataGrid [WPF], mouse behavior"
|
||||
- "keyboard behavior [WPF], DataGrid"
|
||||
- "mouse behavior [WPF], DataGrid"
|
||||
ms.assetid: 563b8854-ca39-4d97-8235-17eaa0f93c8d
|
||||
---
|
||||
# Default Keyboard and Mouse Behavior in the DataGrid Control
|
||||
This topic describes how users can interact with the <xref:System.Windows.Controls.DataGrid> control by using the keyboard and mouse.
|
||||
|
||||
Typical interactions with the <xref:System.Windows.Controls.DataGrid> include navigation, selection, and editing. Selection behavior is affected by the <xref:System.Windows.Controls.DataGrid.SelectionMode%2A> and <xref:System.Windows.Controls.DataGrid.SelectionUnit%2A> properties. The default values that cause the behavior described in this topic are <xref:System.Windows.Controls.DataGridSelectionMode.Extended?displayProperty=nameWithType> and <xref:System.Windows.Controls.DataGridSelectionUnit.FullRow?displayProperty=nameWithType>. Changing these values might cause behavior that is different from that described. When a cell is in edit mode, the editing control might override the standard keyboard behavior of the <xref:System.Windows.Controls.DataGrid>.
|
||||
|
||||
## Default Keyboard Behavior
|
||||
The following table lists the default keyboard behavior for the <xref:System.Windows.Controls.DataGrid>.
|
||||
|
||||
|Key or key combination|Description|
|
||||
|----------------------------|-----------------|
|
||||
|DOWN ARROW|Moves the focus to the cell directly below the current cell. If the focus is in the last row, pressing the DOWN ARROW does nothing.|
|
||||
|UP ARROW|Moves the focus to the cell directly above the current cell. If the focus is in the first row, pressing the UP ARROW does nothing.|
|
||||
|LEFT ARROW|Moves the focus to the previous cell in the row. If the focus is in the first cell in the row, pressing the LEFT ARROW does nothing.|
|
||||
|RIGHT ARROW|Moves the focus to the next cell in the row. If the focus is in the last cell in the row, pressing the RIGHT ARROW does nothing.|
|
||||
|HOME|Moves the focus to the first cell in the current row.|
|
||||
|END|Moves the focus to the last cell in the current row.|
|
||||
|PAGE DOWN|If rows are not grouped, scrolls the control downward by the number of rows that are fully displayed. Moves the focus to the last fully displayed row without changing columns.<br /><br /> If rows are grouped, moves the focus to the last row in the <xref:System.Windows.Controls.DataGrid> without changing columns.|
|
||||
|PAGE UP|If rows are not grouped, scrolls the control upward by the number of rows that are fully displayed. Moves focus to the first displayed row without changing columns.<br /><br /> If rows are grouped, moves the focus to the first row in the <xref:System.Windows.Controls.DataGrid> without changing columns.|
|
||||
|TAB|Moves the focus to the next cell in the current row. If the focus is in the last cell of the row, moves the focus to the first cell in the next row. If the focus is in the last cell in the control, moves the focus to the next control in the tab order of the parent container.<br /><br /> If the current cell is in edit mode and pressing TAB causes focus to move away from the current row, any changes that were made to the row are committed before focus is changed.|
|
||||
|SHIFT+TAB|Moves the focus to the previous cell in the current row. If the focus is already in the first cell of the row, moves the focus to the last cell in the previous row. If the focus is in the first cell in the control, moves the focus to the previous control in the tab order of the parent container.<br /><br /> If the current cell is in edit mode and pressing TAB causes focus to move away from the current row, any changes that were made to the row are committed before focus is changed.|
|
||||
|CTRL+DOWN ARROW|Moves the focus to the last cell in the current column.|
|
||||
|CTRL+UP ARROW|Moves the focus to the first cell in the current column.|
|
||||
|CTRL+RIGHT ARROW|Moves the focus to the last cell in the current row.|
|
||||
|CTRL+LEFT ARROW|Moves the focus to the first cell in the current row.|
|
||||
|CTRL+HOME|Moves the focus to the first cell in the control.|
|
||||
|CTRL+END|Moves the focus to the last cell in the control.|
|
||||
|CTRL+PAGE DOWN|Same as PAGE DOWN.|
|
||||
|CTRL+PAGE UP|Same as PAGE UP.|
|
||||
|F2|If the <xref:System.Windows.Controls.DataGrid.IsReadOnly%2A?displayProperty=nameWithType> property is `false` and the <xref:System.Windows.Controls.DataGridColumn.IsReadOnly%2A?displayProperty=nameWithType> property is `false` for the current column, puts the current cell into cell edit mode.|
|
||||
|ENTER|Commits any changes to the current cell and row and moves the focus to the cell directly below the current cell. If the focus is in the last row, commits any changes without moving the focus.|
|
||||
|ESC|If the control is in edit mode, cancels the edit and reverts any changes that were made in the control. If the underlying data source implements <xref:System.ComponentModel.IEditableObject>, pressing ESC a second time cancels edit mode for the entire row.|
|
||||
|BACKSPACE|Deletes the character before the cursor when editing a cell.|
|
||||
|DELETE|Deletes the character after the cursor when editing a cell.|
|
||||
|CTRL+ENTER|Commits any changes to the current cell without moving the focus.|
|
||||
|CTRL+A|If <xref:System.Windows.Controls.DataGrid.SelectionMode%2A> is set to <xref:System.Windows.Controls.DataGridSelectionMode.Extended>, selects all rows in the <xref:System.Windows.Controls.DataGrid>.|
|
||||
|
||||
## Selection Keys
|
||||
If the <xref:System.Windows.Controls.DataGrid.SelectionMode%2A> property is set to <xref:System.Windows.Controls.DataGridSelectionMode.Extended>, the navigation behavior does not change, but navigating with the keyboard while pressing SHIFT (including CTRL+SHIFT) will modify a multi-row selection. Before navigation starts, the control marks the current row as an anchor row. When you navigate while pressing SHIFT, the selection includes all rows between the anchor row and the current row.
|
||||
|
||||
The following selection keys modify multi-row selection.
|
||||
|
||||
- SHIFT+DOWN ARROW
|
||||
|
||||
- SHIFT+UP ARROW
|
||||
|
||||
- SHIFT+PAGE DOWN
|
||||
|
||||
- SHIFT+PAGE UP
|
||||
|
||||
- CTRL+SHIFT+DOWN ARROW
|
||||
|
||||
- CTRL+SHIFT+UP ARROW
|
||||
|
||||
- CTRL+SHIFT+HOME
|
||||
|
||||
- CTRL+SHIFT+END
|
||||
|
||||
## Default Mouse Behavior
|
||||
The following table lists the default mouse behavior for the <xref:System.Windows.Controls.DataGrid>.
|
||||
|
||||
|Mouse action|Description|
|
||||
|------------------|-----------------|
|
||||
|Click an unselected row|Makes the clicked row the current row, and the clicked cell the current cell.|
|
||||
|Click the current cell|Puts the current cell into edit mode.|
|
||||
|Drag a column header cell|If the <xref:System.Windows.Controls.DataGrid.CanUserReorderColumns%2A?displayProperty=nameWithType> property is `true` and the <xref:System.Windows.Controls.DataGridColumn.CanUserReorder%2A?displayProperty=nameWithType> property is `true` for the current column, moves the column so that it can be dropped into a new position.|
|
||||
|Drag a column header separator|If the <xref:System.Windows.Controls.DataGrid.CanUserResizeColumns%2A?displayProperty=nameWithType> property is `true` and the <xref:System.Windows.Controls.DataGridColumn.CanUserResize%2A?displayProperty=nameWithType> property is `true` for the current column, resizes the column.|
|
||||
|Double-click a column header separator|If the <xref:System.Windows.Controls.DataGrid.CanUserResizeColumns%2A?displayProperty=nameWithType> property is `true` and the <xref:System.Windows.Controls.DataGridColumn.CanUserResize%2A?displayProperty=nameWithType> property is `true` for the current column, auto-sizes the column using the <xref:System.Windows.Controls.DataGridLength.Auto%2A> sizing mode.|
|
||||
|Click a column header cell|If the <xref:System.Windows.Controls.DataGrid.CanUserSortColumns%2A?displayProperty=nameWithType> property is `true` and the <xref:System.Windows.Controls.DataGridColumn.CanUserSort%2A?displayProperty=nameWithType> property is `true` for the current column, sorts the column.<br /><br /> Clicking the header of a column that is already sorted will reverse the sort direction of that column.<br /><br /> Pressing the SHIFT key while clicking multiple column headers will sort by multiple columns in the order clicked.|
|
||||
|CTRL+click a row|If <xref:System.Windows.Controls.DataGrid.SelectionMode%2A> is set to <xref:System.Windows.Controls.DataGridSelectionMode.Extended>, modifies a non-contiguous multi-row selection.<br /><br /> If the row is already selected, deselects the row.|
|
||||
|SHIFT+click a row|If <xref:System.Windows.Controls.DataGrid.SelectionMode%2A> is set to <xref:System.Windows.Controls.DataGridSelectionMode.Extended>, modifies a contiguous multi-row selection.|
|
||||
|Click a row group header|Expands or collapses the group.|
|
||||
|Click the Select All button at the top left corner of the <xref:System.Windows.Controls.DataGrid>|If <xref:System.Windows.Controls.DataGrid.SelectionMode%2A> is set to <xref:System.Windows.Controls.DataGridSelectionMode.Extended>, selects all rows in the <xref:System.Windows.Controls.DataGrid>.|
|
||||
|
||||
## Mouse Selection
|
||||
If the <xref:System.Windows.Controls.DataGrid.SelectionMode%2A> property is set to <xref:System.Windows.Controls.DataGridSelectionMode.Extended>, clicking a row while pressing CTRL or SHIFT will modify a multi-row selection.
|
||||
|
||||
When you click a row while pressing CTRL, the row will change its selection state while all other rows retain their current selection state. Do this to select non-adjacent rows.
|
||||
|
||||
When you click a row while pressing SHIFT, the selection includes all rows between the current row and an anchor row located at the position of the current row prior to the click. Subsequent clicks while pressing SHIFT change the current row, but not the anchor row. Do this to select a range of adjacent rows.
|
||||
|
||||
CTRL+SHIFT can be combined to select non-adjacent ranges of adjacent rows. To do this, select the first range by using SHIFT+click as described earlier. After the first range of rows is selected, use CTRL+click to select the first row in the next range, and then click the last row in the next range while pressing CTRL+SHIFT.
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.DataGrid>
|
||||
- <xref:System.Windows.Controls.DataGrid.SelectionMode%2A>
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: "DockPanel How-to Topics"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "DockPanel control [WPF], how-to topics"
|
||||
- "controls [WPF], DockPanel"
|
||||
ms.assetid: 62544800-db6a-4124-8cb0-ed9bc4a90901
|
||||
---
|
||||
# DockPanel How-to Topics
|
||||
The topics in this section describe how to use the <xref:System.Windows.Controls.DockPanel> element to position child elements along the edge of a layout container.
|
||||
|
||||
## In This Section
|
||||
[Get or Set a Dock Value](how-to-get-or-set-a-dock-value.md)
|
||||
[Create a DockPanel](how-to-create-a-dockpanel.md)
|
||||
[Partition Space by Using the DockPanel Element](how-to-partition-space-by-using-the-dockpanel-element.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.Panel>
|
||||
|
||||
<xref:System.Windows.Controls.Canvas>
|
||||
|
||||
<xref:System.Windows.Controls.DockPanel>
|
||||
|
||||
<xref:System.Windows.Controls.Grid>
|
||||
|
||||
<xref:System.Windows.Controls.StackPanel>
|
||||
|
||||
<xref:System.Windows.Controls.VirtualizingStackPanel>
|
||||
|
||||
<xref:System.Windows.Controls.WrapPanel>
|
||||
|
||||
## Related Sections
|
||||
[Layout](../advanced/layout.md)
|
||||
|
||||
[Walkthrough: My first WPF desktop application](../getting-started/walkthrough-my-first-wpf-desktop-application.md)
|
||||
|
||||
[ScrollViewer Overview](scrollviewer-overview.md)
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: "DockPanel"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], DockPanel"
|
||||
- "DockPanel control [WPF]"
|
||||
ms.assetid: 8d3d290b-d38c-47d0-918e-cee2baeb92ae
|
||||
---
|
||||
# DockPanel
|
||||
The <xref:System.Windows.Controls.DockPanel> element is used to position child content along the edge of a layout container.
|
||||
|
||||
## In This Section
|
||||
[How-to Topics](dockpanel-how-to-topics.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.Panel>
|
||||
|
||||
<xref:System.Windows.Controls.Canvas>
|
||||
|
||||
<xref:System.Windows.Controls.DockPanel>
|
||||
|
||||
<xref:System.Windows.Controls.Grid>
|
||||
|
||||
<xref:System.Windows.Controls.StackPanel>
|
||||
|
||||
<xref:System.Windows.Controls.VirtualizingStackPanel>
|
||||
|
||||
<xref:System.Windows.Controls.WrapPanel>
|
||||
|
||||
## Related Sections
|
||||
[Layout](../advanced/layout.md)
|
||||
|
||||
[Walkthrough: My first WPF desktop application](../getting-started/walkthrough-my-first-wpf-desktop-application.md)
|
||||
|
||||
[ScrollViewer Overview](scrollviewer-overview.md)
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: "DocumentViewer Styles and Templates"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "templates [WPF], DocumentViewer"
|
||||
- "DocumentViewer [WPF], styles and templates"
|
||||
- "states [WPF], DocumentViewer"
|
||||
- "ControlTemplate [WPF], DocumentViewer"
|
||||
- "parts [WPF], DocumentViewer"
|
||||
- "styles [WPF], DocumentViewer"
|
||||
ms.assetid: 6bd4ff8f-ea6a-4084-ac58-e7a67446ce1c
|
||||
---
|
||||
# DocumentViewer Styles and Templates
|
||||
This topic describes the styles and templates for the <xref:System.Windows.Controls.DocumentViewer> control. You can modify the default <xref:System.Windows.Controls.ControlTemplate> to give the control a unique appearance. For more information, see [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template).
|
||||
|
||||
## DocumentViewer Parts
|
||||
The following table lists the named parts for the <xref:System.Windows.Controls.DocumentViewer> control.
|
||||
|
||||
|Part|Type|Description|
|
||||
|-|-|-|
|
||||
|PART_ContentHost|<xref:System.Windows.Controls.ScrollViewer>|The content and scrolling area.|
|
||||
|PART_FindToolBarHost|<xref:System.Windows.Controls.ContentControl>|The search box, at the bottom by default.|
|
||||
|
||||
## DocumentViewer States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.DocumentViewer> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control does not have focus.|
|
||||
|
||||
## DocumentViewer ControlTemplate Example
|
||||
The following example shows how to define a <xref:System.Windows.Controls.ControlTemplate> for the <xref:System.Windows.Controls.DocumentViewer> control.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#DocumentViewer](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/documentviewer.xaml#documentviewer)]
|
||||
|
||||
The preceding example uses one or more of the following resources.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#Resources](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/shared.xaml#resources)]
|
||||
|
||||
For the complete sample, see [Styling with ControlTemplates Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Styles%20&%20Templates/IntroToStylingAndTemplating).
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.FrameworkElement.Style%2A>
|
||||
- <xref:System.Windows.Controls.ControlTemplate>
|
||||
- [Control Styles and Templates](control-styles-and-templates.md)
|
||||
- [Control Customization](control-customization.md)
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
- [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template)
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
title: "DocumentViewer"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], DocumentViewer"
|
||||
- "DocumentViewer control [WPF]"
|
||||
ms.assetid: c21eb322-d6b3-474b-ab05-94527bd1b0fa
|
||||
---
|
||||
# DocumentViewer
|
||||
The <xref:System.Windows.Controls.DocumentViewer> control is used to view <xref:System.Windows.Documents.FixedDocument> content (such as XML Paper Specification (XPS) documents) in a paginated format.
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.DocumentViewer>
|
||||
|
||||
<xref:System.Windows.Documents.FixedDocument>
|
||||
|
||||
## See also
|
||||
|
||||
- [Documents](../advanced/documents.md)
|
||||
- [Document Serialization and Storage](../advanced/document-serialization-and-storage.md)
|
||||
- [Printing Overview](../advanced/printing-overview.md)
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: "Expander How-to Topics"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], Expander"
|
||||
- "Expander control [WPF], how-to topics"
|
||||
ms.assetid: c31e85e3-963f-4693-b463-a29adc433fcd
|
||||
---
|
||||
# Expander How-to Topics
|
||||
The topics in this section describe how to use the <xref:System.Windows.Controls.Expander> control.
|
||||
|
||||
## In This Section
|
||||
[Create an Expander with a ScrollViewer](how-to-create-an-expander-with-a-scrollviewer.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.Expander>
|
||||
|
||||
## Related Sections
|
||||
[Expander Overview](expander-overview.md)
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
title: "Expander Overview"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], Expander"
|
||||
- "Expander control [WPF], about Expander control"
|
||||
ms.assetid: 877bf425-0e54-49ec-8fd2-13a211377abb
|
||||
---
|
||||
# Expander Overview
|
||||
An <xref:System.Windows.Controls.Expander> control provides a way to provide content in an expandable area that resembles a window and includes a header.
|
||||
|
||||
<a name="CreatinganExpanderinXAML"></a>
|
||||
## Creating a Simple Expander
|
||||
The following example shows how to create a simple <xref:System.Windows.Controls.Expander> control. This example creates an <xref:System.Windows.Controls.Expander> that looks like the previous illustration.
|
||||
|
||||
[!code-xaml[ExpanderExample#2](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpanderExample/CSharp/Page1.xaml#2)]
|
||||
|
||||
The <xref:System.Windows.Controls.ContentControl.Content%2A> and <xref:System.Windows.Controls.HeaderedContentControl.Header%2A> of an <xref:System.Windows.Controls.Expander> can also contain complex content, such as <xref:System.Windows.Controls.RadioButton> and <xref:System.Windows.Controls.Image> objects.
|
||||
|
||||
<a name="SettingtheDirectionoftheExpandingWindow"></a>
|
||||
## Setting the Direction of the Expanding Content Area
|
||||
You can set the content area of an <xref:System.Windows.Controls.Expander> control to expand in one of four directions (<xref:System.Windows.Controls.ExpandDirection.Down>, <xref:System.Windows.Controls.ExpandDirection.Up>, <xref:System.Windows.Controls.ExpandDirection.Left>, or <xref:System.Windows.Controls.ExpandDirection.Right>) by using the <xref:System.Windows.Controls.ExpandDirection> property. When the content area is collapsed, only the <xref:System.Windows.Controls.Expander><xref:System.Windows.Controls.HeaderedContentControl.Header%2A> and its toggle button appear. A <xref:System.Windows.Controls.Button> control that displays a directional arrow is used as a toggle button to expand or collapse the content area. When expanded, the <xref:System.Windows.Controls.Expander> tries to display all of its content in a window-like area.
|
||||
|
||||
<a name="SettingSizeDimensionsonanExpanderinaPanel"></a>
|
||||
## Controlling the Size of an Expander in a Panel
|
||||
If an <xref:System.Windows.Controls.Expander> control is inside a layout control that inherits from <xref:System.Windows.Controls.Panel>, such as <xref:System.Windows.Controls.StackPanel>, do not specify a <xref:System.Windows.FrameworkElement.Height%2A> on the <xref:System.Windows.Controls.Expander> when the <xref:System.Windows.Controls.Expander.ExpandDirection%2A> property is set to <xref:System.Windows.Controls.ExpandDirection.Down> or <xref:System.Windows.Controls.ExpandDirection.Up>. Similarly, do not specify a <xref:System.Windows.FrameworkElement.Width%2A> on the <xref:System.Windows.Controls.Expander> when the <xref:System.Windows.Controls.Expander.ExpandDirection%2A> property is set to <xref:System.Windows.Controls.ExpandDirection.Left> or <xref:System.Windows.Controls.ExpandDirection.Right>.
|
||||
|
||||
When you set a size dimension on an <xref:System.Windows.Controls.Expander> control in the direction that the expanded content is displayed, the <xref:System.Windows.Controls.Expander> takes control of the area that is used by the content and displays a border around it. The border shows even when the content is collapsed. To set the size of the expanded content area, set size dimensions on the content of the <xref:System.Windows.Controls.Expander>, or if you want scrolling capability, on the <xref:System.Windows.Controls.ScrollViewer> that encloses the content.
|
||||
|
||||
When an <xref:System.Windows.Controls.Expander> control is the last element in a <xref:System.Windows.Controls.DockPanel>, [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] automatically sets the <xref:System.Windows.Controls.Expander> dimensions to equal the remaining area of the <xref:System.Windows.Controls.DockPanel>. To prevent this default behavior, set the <xref:System.Windows.Controls.DockPanel.LastChildFill%2A> property on the <xref:System.Windows.Controls.DockPanel> object to `false`, or make sure that the <xref:System.Windows.Controls.Expander> is not the last element in a <xref:System.Windows.Controls.DockPanel>.
|
||||
|
||||
<a name="CreatingScrollableContent"></a>
|
||||
## Creating Scrollable Content
|
||||
If the content is too large for the size of the content area, you can wrap the content of an <xref:System.Windows.Controls.Expander> in a <xref:System.Windows.Controls.ScrollViewer> in order to provide scrollable content. The <xref:System.Windows.Controls.Expander> control does not automatically provide scrolling capability. The following illustration shows an <xref:System.Windows.Controls.Expander> control that contains a <xref:System.Windows.Controls.ScrollViewer> control.
|
||||
|
||||
**Expander in a ScrollViewer**
|
||||
|
||||

|
||||
|
||||
When you place an <xref:System.Windows.Controls.Expander> control in a <xref:System.Windows.Controls.ScrollViewer>, set the <xref:System.Windows.Controls.ScrollViewer> dimension property that corresponds to the direction in which the <xref:System.Windows.Controls.Expander> content opens to the size of the <xref:System.Windows.Controls.Expander> content area. For example, if you set the <xref:System.Windows.Controls.Expander.ExpandDirection%2A> property on the <xref:System.Windows.Controls.Expander> to <xref:System.Windows.Controls.ExpandDirection.Down> (the content area opens down), set the <xref:System.Windows.FrameworkElement.Height%2A> property on the <xref:System.Windows.Controls.ScrollViewer> control to the required height for the content area. If you instead set the height dimension on the content itself, <xref:System.Windows.Controls.ScrollViewer> does not recognize this setting and therefore, does not provide scrollable content.
|
||||
|
||||
The following example shows how to create an <xref:System.Windows.Controls.Expander> control that has complex content and that contains a <xref:System.Windows.Controls.ScrollViewer> control. This example creates an <xref:System.Windows.Controls.Expander> that is like the illustration at the beginning of this section.
|
||||
|
||||
[!code-csharp[ExpanderRichContent#1](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpanderRichContent/CSharp/Window1.xaml.cs#1)]
|
||||
[!code-vb[ExpanderRichContent#1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ExpanderRichContent/VisualBasic/Window1.xaml.vb#1)]
|
||||
[!code-xaml[ExpanderRichContent#1](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpanderRichContent/CSharp/Window1.xaml#1)]
|
||||
|
||||
<a name="UsingtheAlignmentProperties"></a>
|
||||
## Using the Alignment Properties
|
||||
You can align content by setting the <xref:System.Windows.Controls.Control.HorizontalContentAlignment%2A> and <xref:System.Windows.Controls.Control.VerticalContentAlignment%2A> properties on the <xref:System.Windows.Controls.Expander> control. When you set these properties, the alignment applies to the header and also to the expanded content.
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.Expander>
|
||||
- <xref:System.Windows.Controls.ExpandDirection>
|
||||
- [How-to Topics](expander-how-to-topics.md)
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
title: "Expander Styles and Templates"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "styles [WPF], Expander"
|
||||
- "ControlTemplate [WPF], Expander"
|
||||
- "templates [WPF], Expander"
|
||||
- "Expander [WPF], styles and templates"
|
||||
- "states [WPF], Expander"
|
||||
- "parts [WPF], Expander"
|
||||
ms.assetid: da2e5a1c-5230-4c21-98a5-59c7895facd7
|
||||
---
|
||||
# Expander Styles and Templates
|
||||
This topic describes the styles and templates for the <xref:System.Windows.Controls.Expander> control. You can modify the default <xref:System.Windows.Controls.ControlTemplate> to give the control a unique appearance. For more information, see [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template).
|
||||
|
||||
## Expander Parts
|
||||
The <xref:System.Windows.Controls.Expander> control does not have any named parts.
|
||||
|
||||
## Expander States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.Expander> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Normal|CommonStates|The default state.|
|
||||
|MouseOver|CommonStates|The mouse pointer is positioned over the control.|
|
||||
|Disabled|CommonStates|The control is disabled.|
|
||||
|Focused|FocusStates|The control has focus.|
|
||||
|Unfocused|FocusStates|The control does not have focus.|
|
||||
|Expanded|ExpansionStates|The control is expanded.|
|
||||
|Collapsed|ExpansionStates|The control is not expanded.|
|
||||
|ExpandDown|ExpandDirectionStates|The control expands down.|
|
||||
|ExpandUp|ExpandDirectionStates|The control expands up.|
|
||||
|ExpandLeft|ExpandDirectionStates|The control expands left.|
|
||||
|ExpandRight|ExpandDirectionStates|The control expands right.|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control does not have focus.|
|
||||
|
||||
## Expander ControlTemplate Example
|
||||
The following example shows how to define a <xref:System.Windows.Controls.ControlTemplate> for the <xref:System.Windows.Controls.Expander> control.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#Expander](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/expander.xaml#expander)]
|
||||
|
||||
The preceding example uses one or more of the following resources.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#Resources](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/shared.xaml#resources)]
|
||||
|
||||
For the complete sample, see [Styling with ControlTemplates Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Styles%20&%20Templates/IntroToStylingAndTemplating).
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.FrameworkElement.Style%2A>
|
||||
- <xref:System.Windows.Controls.ControlTemplate>
|
||||
- [Control Styles and Templates](control-styles-and-templates.md)
|
||||
- [Control Customization](control-customization.md)
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
- [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template)
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: "Expander"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "expanding headers [WPF]"
|
||||
- "controls [WPF], Expander"
|
||||
- "headers [WPF]"
|
||||
- "Expander control [WPF]"
|
||||
- "collapsing headers [WPF]"
|
||||
ms.assetid: e9dfc8d6-4555-47b9-a4de-0acd64f8770a
|
||||
---
|
||||
# Expander
|
||||
An <xref:System.Windows.Controls.Expander> allows a user to view a header and expand that header to see further details, or to collapse a section up to a header.
|
||||
|
||||
The following illustration provides an example of this control in its expanded position.
|
||||
|
||||

|
||||
|
||||
## In This Section
|
||||
[Expander Overview](expander-overview.md)
|
||||
[How-to Topics](expander-how-to-topics.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.Expander>
|
||||
|
||||
## Related Sections
|
||||
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: "FlowDocumentPageViewer"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "FlowDocumentPageViewer control [WPF]"
|
||||
- "controls [WPF], FlowDocumentPageViewer"
|
||||
ms.assetid: 1ed5a30e-f415-4c26-a52f-9f028a68f66f
|
||||
---
|
||||
# FlowDocumentPageViewer
|
||||
The <xref:System.Windows.Controls.FlowDocumentPageViewer> control is used to view <xref:System.Windows.Documents.FlowDocument> content on a per page basis. Contrast with the <xref:System.Windows.Controls.FlowDocumentScrollViewer>, which presents <xref:System.Windows.Documents.FlowDocument> content in a scrolling viewer.
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Documents.FlowDocument>
|
||||
- [Flow Document Overview](../advanced/flow-document-overview.md)
|
||||
- [How-to Topics](../advanced/flow-content-elements-how-to-topics.md)
|
||||
- [Documents in WPF](../advanced/documents-in-wpf.md)
|
||||
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: "FlowDocumentReader"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], FlowDocumentReader"
|
||||
- "FlowDocumentReader control [WPF]"
|
||||
ms.assetid: ba7aaa70-f77b-4555-a79d-68a12c8e134b
|
||||
---
|
||||
# FlowDocumentReader
|
||||
The <xref:System.Windows.Controls.FlowDocumentReader> control is used to view <xref:System.Windows.Documents.FlowDocument> content. It supports multiple viewing modes.
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.FlowDocumentReader>
|
||||
- <xref:System.Windows.Controls.FlowDocumentPageViewer>
|
||||
- <xref:System.Windows.Controls.FlowDocumentScrollViewer>
|
||||
- [Documents in WPF](../advanced/documents-in-wpf.md)
|
||||
- [Flow Document Overview](../advanced/flow-document-overview.md)
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: "FlowDocumentScrollViewer"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], FlowDocumentScrollViewer"
|
||||
- "FlowDocumentScrollViewer control [WPF]"
|
||||
ms.assetid: 727b0a0a-b845-4aa9-9fd4-98f42ed738b4
|
||||
---
|
||||
# FlowDocumentScrollViewer
|
||||
The <xref:System.Windows.Controls.FlowDocumentScrollViewer> control is used to view <xref:System.Windows.Documents.FlowDocument> content in a scrolling container. Contrast with <xref:System.Windows.Controls.FlowDocumentPageViewer>, which views content on a per page basis.
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.FlowDocumentReader>
|
||||
- <xref:System.Windows.Controls.FlowDocumentPageViewer>
|
||||
- <xref:System.Windows.Controls.FlowDocumentScrollViewer>
|
||||
- <xref:System.Windows.Documents.FlowDocument>
|
||||
- [Documents in WPF](../advanced/documents-in-wpf.md)
|
||||
- [Flow Document Overview](../advanced/flow-document-overview.md)
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
title: "Frame Styles and Templates"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "parts [WPF], Frame"
|
||||
- "templates [WPF], Frame"
|
||||
- "ControlTemplate [WPF], Frame"
|
||||
- "Frame [WPF], styles and templates"
|
||||
- "states [WPF], Frame"
|
||||
- "styles [WPF], Frame"
|
||||
ms.assetid: a01c32e2-c951-46a0-a82f-2614ca241f0b
|
||||
---
|
||||
# Frame Styles and Templates
|
||||
This topic describes the styles and templates for the <xref:System.Windows.Controls.Frame> control. You can modify the default <xref:System.Windows.Controls.ControlTemplate> to give the control a unique appearance. For more information, see [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template).
|
||||
|
||||
## Frame Parts
|
||||
The following table lists the named parts for the <xref:System.Windows.Controls.Frame> control.
|
||||
|
||||
|Part|Type|Description|
|
||||
|-|-|-|
|
||||
|PART_FrameCP|<xref:System.Windows.Controls.ContentPresenter>|The content area.|
|
||||
|
||||
## Frame States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.Frame> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control does not have focus.|
|
||||
|
||||
## Frame ControlTemplate Example
|
||||
The following example shows how to define a <xref:System.Windows.Controls.ControlTemplate> for the <xref:System.Windows.Controls.Frame> control.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#Frame](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/frame.xaml#frame)]
|
||||
|
||||
The preceding example uses one or more of the following resources.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#Resources](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/shared.xaml#resources)]
|
||||
|
||||
For the complete sample, see [Styling with ControlTemplates Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Styles%20&%20Templates/IntroToStylingAndTemplating).
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.FrameworkElement.Style%2A>
|
||||
- <xref:System.Windows.Controls.ControlTemplate>
|
||||
- [Control Styles and Templates](control-styles-and-templates.md)
|
||||
- [Control Customization](control-customization.md)
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
- [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template)
|
||||
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: "Frame"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "navigation [WPF], within content"
|
||||
- "controls [WPF], Frame"
|
||||
- "Frame control [WPF]"
|
||||
- "content [WPF], Frame control"
|
||||
ms.assetid: 1588f9bf-9001-4437-a8fc-cc57ef50561c
|
||||
---
|
||||
# Frame
|
||||
The <xref:System.Windows.Controls.Frame> control supports content navigation within content. <xref:System.Windows.Controls.Frame> can be hosted by a root element like <xref:System.Windows.Window>, <xref:System.Windows.Navigation.NavigationWindow>, <xref:System.Windows.Controls.Page>, <xref:System.Windows.Controls.UserControl>, <xref:System.Windows.Documents.FlowDocument>, or as an island within a content tree that belongs to a root element.
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.Frame>
|
||||
|
||||
## Related Sections
|
||||
[Navigation Overview](../app-development/navigation-overview.md)
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: "Grid How-to Topics"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "Grid control [WPF], how-to topics"
|
||||
- "controls [WPF], Grid"
|
||||
ms.assetid: 90e07c2d-237f-47b4-a632-771570b77fd0
|
||||
---
|
||||
# Grid How-to Topics
|
||||
The topics in this section describe how to position elements using the <xref:System.Windows.Controls.Grid> element.
|
||||
|
||||
## In This Section
|
||||
[Build a Standard UI Dialog Box by Using Grid](how-to-build-a-standard-ui-dialog-box-by-using-grid.md)
|
||||
[Create a Complex Grid](how-to-create-a-complex-grid.md)
|
||||
[Create a Grid Element](how-to-create-a-grid-element.md)
|
||||
[Create and Use a GridLengthConverter Object](how-to-create-and-use-a-gridlengthconverter-object.md)
|
||||
[Manipulate Columns and Rows by Using ColumnDefinitionsCollections and RowDefinitionsCollections](manipulate-columns-and-rows-by-using-columndefinitionscollections.md)
|
||||
[Position the Child Elements of a Grid](how-to-position-the-child-elements-of-a-grid.md)
|
||||
[Share Sizing Properties Between Grids](how-to-share-sizing-properties-between-grids.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.Panel>
|
||||
|
||||
<xref:System.Windows.Controls.Canvas>
|
||||
|
||||
<xref:System.Windows.Controls.DockPanel>
|
||||
|
||||
<xref:System.Windows.Controls.Grid>
|
||||
|
||||
<xref:System.Windows.Controls.StackPanel>
|
||||
|
||||
<xref:System.Windows.Controls.VirtualizingStackPanel>
|
||||
|
||||
<xref:System.Windows.Controls.WrapPanel>
|
||||
|
||||
## Related Sections
|
||||
[Layout](../advanced/layout.md)
|
||||
|
||||
[Walkthrough: My first WPF desktop application](../getting-started/walkthrough-my-first-wpf-desktop-application.md)
|
||||
|
||||
[ScrollViewer Overview](scrollviewer-overview.md)
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: "Grid"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], Grid"
|
||||
- "content [WPF], Grid control"
|
||||
- "Grid control [WPF]"
|
||||
ms.assetid: cf2cc94c-bbc2-4e54-a601-605038ab63fe
|
||||
---
|
||||
# Grid
|
||||
The <xref:System.Windows.Controls.Grid> element is used to precisely position content in rows and columns.
|
||||
|
||||
## In This Section
|
||||
[How-to Topics](grid-how-to-topics.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.Panel>
|
||||
|
||||
<xref:System.Windows.Controls.Canvas>
|
||||
|
||||
<xref:System.Windows.Controls.DockPanel>
|
||||
|
||||
<xref:System.Windows.Controls.Grid>
|
||||
|
||||
<xref:System.Windows.Controls.StackPanel>
|
||||
|
||||
<xref:System.Windows.Controls.VirtualizingStackPanel>
|
||||
|
||||
<xref:System.Windows.Controls.WrapPanel>
|
||||
|
||||
## Related Sections
|
||||
[Layout](../advanced/layout.md)
|
||||
|
||||
[Walkthrough: My first WPF desktop application](../getting-started/walkthrough-my-first-wpf-desktop-application.md)
|
||||
|
||||
[ScrollViewer Overview](scrollviewer-overview.md)
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
title: "GridSplitter How-to Topics"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "GridSplitter control [WPF], how-to topics"
|
||||
- "controls [WPF], GridSplitter"
|
||||
ms.assetid: db0da67a-954f-42e6-bbf7-4e16b8cbb210
|
||||
---
|
||||
# GridSplitter How-to Topics
|
||||
The topics in this section describe how to use the <xref:System.Windows.Controls.GridSplitter> control.
|
||||
|
||||
## In This Section
|
||||
[Resize Rows with a GridSplitter](how-to-resize-rows-with-a-gridsplitter.md)
|
||||
[Resize Columns with a GridSplitter](how-to-resize-columns-with-a-gridsplitter.md)
|
||||
[Make Sure That a GridSplitter Is Visible](how-to-make-sure-that-a-gridsplitter-is-visible.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.GridSplitter>
|
||||
|
||||
<xref:System.Windows.Controls.Grid>
|
||||
|
||||
## Related Sections
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: "GridSplitter"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], GridSplitter"
|
||||
- "GridSplitter control [WPF]"
|
||||
- "content [WPF], GridSplitter control"
|
||||
ms.assetid: 98b007e8-ea6b-41b5-8120-ca7134e8239f
|
||||
---
|
||||
# GridSplitter
|
||||
The <xref:System.Windows.Controls.GridSplitter> redistributes space between columns or rows of a <xref:System.Windows.Controls.Grid> control.
|
||||
|
||||
## In This Section
|
||||
[How-to Topics](gridsplitter-how-to-topics.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.GridSplitter>
|
||||
|
||||
## Related Sections
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: "GridView Column Header Styles and Templates Overview"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "column headers [WPF], customizing"
|
||||
- "ListView controls [WPF], GridView column header styles"
|
||||
- "controls [WPF], ListView"
|
||||
- "headers [WPF], customizing"
|
||||
- "GridView view mode [WPF], customizing column headers"
|
||||
ms.assetid: 74835674-a39e-4ab5-9418-ad7f6ab7b956
|
||||
---
|
||||
# GridView Column Header Styles and Templates Overview
|
||||
This overview discusses the order of precedence for properties that you use to customize a column header in the <xref:System.Windows.Controls.GridView> view mode of a <xref:System.Windows.Controls.ListView> control.
|
||||
|
||||
## Customizing a Column Header in a GridView
|
||||
The properties that define the content, layout, and style of a column header in a <xref:System.Windows.Controls.GridView> are found on many related classes. Some of these properties have functionality that is similar or the same.
|
||||
|
||||
The rows in the following table show groups of properties that perform the same function. You can use these properties to customize the column headers in a <xref:System.Windows.Controls.GridView>. The order of precedence for related properties is from right to left where the property in the farthest right column has the highest precedence. For example, if a <xref:System.Windows.Controls.ContentControl.ContentTemplate%2A> is set on the <xref:System.Windows.Controls.GridViewColumnHeader> object and the <xref:System.Windows.Controls.GridViewColumn.HeaderTemplateSelector%2A> is set on the associated <xref:System.Windows.Controls.GridViewColumn>, the <xref:System.Windows.Controls.ContentControl.ContentTemplate%2A> takes precedence. In this scenario, the <xref:System.Windows.Controls.GridViewColumn.HeaderTemplateSelector%2A> has no effect.
|
||||
|
||||
**Related properties for column headers in a GridView**
|
||||
|
||||
|||||
|
||||
|-|-|-|-|
|
||||
|**Classes**|<xref:System.Windows.Controls.GridView>|<xref:System.Windows.Controls.GridViewColumn>|<xref:System.Windows.Controls.GridViewColumnHeader>|
|
||||
|**Context Menu Properties**|<xref:System.Windows.Controls.GridView.ColumnHeaderContextMenu%2A>|Not applicable|<xref:System.Windows.FrameworkElement.ContextMenu%2A>|
|
||||
|**ToolTip**<br /><br /> **Properties**|<xref:System.Windows.Controls.GridView.ColumnHeaderToolTip%2A>|Not applicable|<xref:System.Windows.FrameworkElement.ToolTip%2A>|
|
||||
|**Header Template**<br /><br /> **Properties**|<xref:System.Windows.Controls.GridView.ColumnHeaderTemplate%2A> <sup>1</sup>/<br /><br /> <xref:System.Windows.Controls.GridView.ColumnHeaderTemplateSelector%2A>|<xref:System.Windows.Controls.GridViewColumn.HeaderTemplate%2A> <sup>1</sup>/<br /><br /> <xref:System.Windows.Controls.GridViewColumn.HeaderTemplateSelector%2A>|<xref:System.Windows.Controls.ContentControl.ContentTemplate%2A> <sup>1</sup>/<br /><br /> <xref:System.Windows.Controls.ContentControl.ContentTemplateSelector%2A>|
|
||||
|**Style Properties**|<xref:System.Windows.Controls.GridView.ColumnHeaderContainerStyle%2A>|<xref:System.Windows.Controls.GridViewColumn.HeaderContainerStyle%2A>|<xref:System.Windows.FrameworkElement.Style%2A>|
|
||||
|
||||
<sup>1</sup>For **Header Template Properties**, if you set both the template and template selector properties, the template property takes precedence. For example, if you set both the <xref:System.Windows.Controls.ContentControl.ContentTemplate%2A> and <xref:System.Windows.Controls.ContentControl.ContentTemplateSelector%2A> properties, the <xref:System.Windows.Controls.ContentControl.ContentTemplate%2A> property takes precedence.
|
||||
|
||||
## See also
|
||||
|
||||
- [How-to Topics](listview-how-to-topics.md)
|
||||
- [ListView Overview](listview-overview.md)
|
||||
- [GridView Overview](gridview-overview.md)
|
||||
@@ -0,0 +1,131 @@
|
||||
---
|
||||
title: "GridView Overview"
|
||||
description: Learn about styles and templates for the Windows Presentation Foundation ListView control. Modify the ControlTemplate to give the control a unique appearance.
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "GridView view mode [WPF]"
|
||||
- "ListView controls [WPF], GridView view mode"
|
||||
- "controls [WPF], ListView"
|
||||
ms.assetid: b2d02267-32b3-40ce-8e9f-06972d8749d9
|
||||
---
|
||||
# GridView Overview
|
||||
<xref:System.Windows.Controls.GridView> view mode is one of the view modes for a <xref:System.Windows.Controls.ListView> control. The <xref:System.Windows.Controls.GridView> class and its supporting classes enable you and your users to view item collections in a table that typically uses buttons as interactive column headers. This topic introduces the <xref:System.Windows.Controls.GridView> class and outlines its use.
|
||||
|
||||
<a name="DefiningaListViewthatusesGridViewView"></a>
|
||||
## What Is a GridView View?
|
||||
The <xref:System.Windows.Controls.GridView> view mode displays a list of data items by binding data fields to columns and by displaying a column header to identify the field. The default <xref:System.Windows.Controls.GridView> style implements buttons as column headers. By using buttons for column headers, you can implement important user interaction capabilities; for example, users can click the column header to sort <xref:System.Windows.Controls.GridView> data according to the contents of a specific column.
|
||||
|
||||
> [!NOTE]
|
||||
> The button controls that <xref:System.Windows.Controls.GridView> uses for column headers are derived from <xref:System.Windows.Controls.Primitives.ButtonBase>.
|
||||
|
||||
The following illustration shows a <xref:System.Windows.Controls.GridView> view of <xref:System.Windows.Controls.ListView> content.
|
||||
|
||||

|
||||
|
||||
<xref:System.Windows.Controls.GridView> columns are represented by <xref:System.Windows.Controls.GridViewColumn> objects, which can automatically size to their content. Optionally, you can explicitly set a <xref:System.Windows.Controls.GridViewColumn> to a specific width. You can resize columns by dragging the gripper between column headers. You can also dynamically add, remove, replace, and reorder columns because this functionality is built into <xref:System.Windows.Controls.GridView>. However, <xref:System.Windows.Controls.GridView> cannot directly update the data that it displays.
|
||||
|
||||
The following example shows how to define a <xref:System.Windows.Controls.GridView> that displays employee data. In this example, <xref:System.Windows.Controls.ListView> defines the `EmployeeInfoDataSource` as the <xref:System.Windows.Controls.ItemsControl.ItemsSource%2A>. The property definitions of <xref:System.Windows.Controls.GridViewColumn.DisplayMemberBinding%2A> bind <xref:System.Windows.Controls.GridViewColumn> content to `EmployeeInfoDataSource` data categories.
|
||||
|
||||
[!code-xaml[ListViewCode#ListViewEmployee](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewCode/CSharp/Window1.xaml#listviewemployee)]
|
||||
|
||||
The following illustration shows the table that the previous example creates. The GridView control displays data from an ItemsSource object:
|
||||
|
||||

|
||||
|
||||
<a name="GridViewLayoutandStyle"></a>
|
||||
## GridView Layout and Style
|
||||
The column cells and the column header of a <xref:System.Windows.Controls.GridViewColumn> have the same width. By default, each column sizes its width to fit its content. Optionally, you can set a column to a fixed width.
|
||||
|
||||
Related data content displays in horizontal rows. For example, in the previous illustration, each employee's last name, first name, and ID number are displayed as a set because they appear in a horizontal row.
|
||||
|
||||
<a name="DefiningandStylingColumnsinaGridView"></a>
|
||||
### Defining and Styling Columns in a GridView
|
||||
When defining the data field to display in a <xref:System.Windows.Controls.GridViewColumn>, use the <xref:System.Windows.Controls.GridViewColumn.DisplayMemberBinding%2A>, <xref:System.Windows.Controls.GridViewColumn.CellTemplate%2A>, or <xref:System.Windows.Controls.GridViewColumn.CellTemplateSelector%2A> properties. The <xref:System.Windows.Controls.GridViewColumn.DisplayMemberBinding%2A> property takes precedence over either of the template properties.
|
||||
|
||||
To specify the alignment of content in a column of a <xref:System.Windows.Controls.GridView>, define a <xref:System.Windows.Controls.GridViewColumn.CellTemplate%2A>. Do not use the <xref:System.Windows.Controls.Control.HorizontalContentAlignment%2A> and <xref:System.Windows.Controls.Control.VerticalContentAlignment%2A> properties for <xref:System.Windows.Controls.ListView> content that is displayed by using a <xref:System.Windows.Controls.GridView>.
|
||||
|
||||
To specify template and style properties for column headers, use the <xref:System.Windows.Controls.GridView>, <xref:System.Windows.Controls.GridViewColumn>, and <xref:System.Windows.Controls.GridViewColumnHeader> classes. For more information, see [GridView Column Header Styles and Templates Overview](gridview-column-header-styles-and-templates-overview.md).
|
||||
|
||||
<a name="AddingVisualElementstoaGridViewView"></a>
|
||||
### Adding Visual Elements to a GridView
|
||||
To add visual elements, such as <xref:System.Windows.Controls.CheckBox> and <xref:System.Windows.Controls.Button> controls, to a <xref:System.Windows.Controls.GridView> view mode, use templates or styles.
|
||||
|
||||
If you explicitly define a visual element as a data item, it can appear only one time in a <xref:System.Windows.Controls.GridView>. This limitation exists because an element can have only one parent and therefore, can appear only one time in the visual tree.
|
||||
|
||||
<a name="StylingRowsinaGridViewView"></a>
|
||||
### Styling Rows in a GridView
|
||||
Use the <xref:System.Windows.Controls.GridViewRowPresenter> and <xref:System.Windows.Controls.GridViewHeaderRowPresenter> classes to format and display the rows of a <xref:System.Windows.Controls.GridView>. For an example of how to style rows in a <xref:System.Windows.Controls.GridView> view mode, see [Style a Row in a ListView That Implements a GridView](how-to-style-a-row-in-a-listview-that-implements-a-gridview.md).
|
||||
|
||||
<a name="AlignmentIssuesWhenUsingItemContainerStyle"></a>
|
||||
### Alignment Issues When You Use ItemContainerStyle
|
||||
To prevent alignment issues between column headers and cells, do not set a property or specify a template that affects the width of an item in an <xref:System.Windows.Controls.ItemsControl.ItemContainerStyle%2A>. For example, do not set the <xref:System.Windows.FrameworkElement.Margin%2A> property or specify a <xref:System.Windows.Controls.ControlTemplate> that adds a <xref:System.Windows.Controls.CheckBox> to an <xref:System.Windows.Controls.ItemsControl.ItemContainerStyle%2A> that is defined on a <xref:System.Windows.Controls.ListView> control. Instead, specify the properties and templates that affect column width directly on classes that define a <xref:System.Windows.Controls.GridView> view mode.
|
||||
|
||||
For example, to add a <xref:System.Windows.Controls.CheckBox> to the rows in <xref:System.Windows.Controls.GridView> view mode, add the <xref:System.Windows.Controls.CheckBox> to a <xref:System.Windows.DataTemplate>, and then set the <xref:System.Windows.Controls.GridViewColumn.CellTemplate%2A> property to that <xref:System.Windows.DataTemplate>.
|
||||
|
||||
<a name="InteractingwithaGridViewControl"></a>
|
||||
## User Interactions with a GridView
|
||||
When you use a <xref:System.Windows.Controls.GridView> in your application, users can interact with and modify the formatting of the <xref:System.Windows.Controls.GridView>. For example, users can reorder columns, resize a column, select items in a table, and scroll through content. You can also define an event handler that responds when a user clicks the column header button. The event handler can perform operations like sorting the data that is displayed in the <xref:System.Windows.Controls.GridView> according to the contents of a column.
|
||||
|
||||
The following list discusses in more detail the capabilities of using <xref:System.Windows.Controls.GridView> for user interaction:
|
||||
|
||||
- **Reorder columns by using the drag-and-drop method.**
|
||||
|
||||
Users can reorder columns in a <xref:System.Windows.Controls.GridView> by pressing the left mouse button while it is over a column header and then dragging that column to a new position. While the user drags the column header, a floating version of the header is displayed as well as a solid black line that shows where to insert the column.
|
||||
|
||||
If you want to modify the default style for the floating version of a header, specify a <xref:System.Windows.Controls.ControlTemplate> for a <xref:System.Windows.Controls.GridViewColumnHeader> type that is triggered when the <xref:System.Windows.Controls.GridViewColumnHeader.Role%2A> property is set to <xref:System.Windows.Controls.GridViewColumnHeaderRole.Floating>. For more information, see [Create a Style for a Dragged GridView Column Header](how-to-create-a-style-for-a-dragged-gridview-column-header.md).
|
||||
|
||||
- **Resize a column to its content.**
|
||||
|
||||
Users can double-click the gripper to the right of a column header in order to resize a column to fit its content.
|
||||
|
||||
> [!NOTE]
|
||||
> You can set the <xref:System.Windows.Controls.GridViewColumn.Width%2A> property to `Double.NaN` to produce the same effect.
|
||||
|
||||
- **Select row items.**
|
||||
|
||||
Users can select one or more items in a <xref:System.Windows.Controls.GridView>.
|
||||
|
||||
If you want to change the <xref:System.Windows.Style> of a selected item, see [Use Triggers to Style Selected Items in a ListView](how-to-use-triggers-to-style-selected-items-in-a-listview.md).
|
||||
|
||||
- **Scroll to view content that is not initially visible on the screen.**
|
||||
|
||||
If the size of the <xref:System.Windows.Controls.GridView> is not large enough to display all the items, users can scroll horizontally or vertically by using scrollbars, which are provided by a <xref:System.Windows.Controls.ScrollViewer> control. A <xref:System.Windows.Controls.Primitives.ScrollBar> is hidden if all the content is visible in a specific direction. Column headers do not scroll with a vertical scroll bar, but do scroll horizontally.
|
||||
|
||||
- **Interact with columns by clicking the column header buttons.**
|
||||
|
||||
When users click a column header button, they can sort the data that is displayed in the column if you have provided a sorting algorithm.
|
||||
|
||||
You can handle the <xref:System.Windows.Controls.Primitives.ButtonBase.Click> event for column header buttons in order to provide functionality like a sorting algorithm. To handle the <xref:System.Windows.Controls.Primitives.ButtonBase.Click> event for a single column header, set an event handler on the <xref:System.Windows.Controls.GridViewColumnHeader>. To set an event handler that handles the <xref:System.Windows.Controls.Primitives.ButtonBase.Click> event for all column headers, set the handler on the <xref:System.Windows.Controls.ListView> control.
|
||||
|
||||
<a name="Obtaining_Other_Custom_Views"></a>
|
||||
## Obtaining Other Custom Views
|
||||
The <xref:System.Windows.Controls.GridView> class, which is derived from the <xref:System.Windows.Controls.ViewBase> abstract class, is just one of the possible view modes for the <xref:System.Windows.Controls.ListView> class. You can create other custom views for <xref:System.Windows.Controls.ListView> by deriving from the <xref:System.Windows.Controls.ViewBase> class. For an example of a custom view mode, see [Create a Custom View Mode for a ListView](how-to-create-a-custom-view-mode-for-a-listview.md).
|
||||
|
||||
<a name="GridViewSupportingClasses"></a>
|
||||
## GridView Supporting Classes
|
||||
The following classes support the <xref:System.Windows.Controls.GridView> view mode.
|
||||
|
||||
- <xref:System.Windows.Controls.GridViewColumn>
|
||||
|
||||
- <xref:System.Windows.Controls.GridViewColumnHeader>
|
||||
|
||||
- <xref:System.Windows.Controls.GridViewRowPresenter>
|
||||
|
||||
- <xref:System.Windows.Controls.GridViewHeaderRowPresenter>
|
||||
|
||||
- <xref:System.Windows.Controls.GridViewColumnCollection>
|
||||
|
||||
- <xref:System.Windows.Controls.GridViewColumnHeaderRole>
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.ListView>
|
||||
- <xref:System.Windows.Controls.ListViewItem>
|
||||
- <xref:System.Windows.Controls.GridViewColumn>
|
||||
- <xref:System.Windows.Controls.GridViewColumnHeader>
|
||||
- <xref:System.Windows.Controls.GridViewRowPresenter>
|
||||
- <xref:System.Windows.Controls.GridViewHeaderRowPresenter>
|
||||
- <xref:System.Windows.Controls.ViewBase>
|
||||
- [ListView Overview](listview-overview.md)
|
||||
- [Sort a GridView Column When a Header Is Clicked](how-to-sort-a-gridview-column-when-a-header-is-clicked.md)
|
||||
- [How-to Topics](listview-how-to-topics.md)
|
||||
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title: "GroupBox Styles and Templates"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "ControlTemplate [WPF], GroupBox"
|
||||
- "parts [WPF], GroupBox"
|
||||
- "GroupBox [WPF], styles and templates"
|
||||
- "states [WPF], GroupBox"
|
||||
- "styles [WPF], GroupBox"
|
||||
- "templates [WPF], GroupBox"
|
||||
ms.assetid: 33df7037-0a1b-476f-b9d0-41566a777699
|
||||
---
|
||||
# GroupBox Styles and Templates
|
||||
<a name="introduction"></a> This topic describes the styles and templates for the <xref:System.Windows.Controls.GroupBox> control. You can modify the default <xref:System.Windows.Controls.ControlTemplate> to give the control a unique appearance. For more information, see [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template).
|
||||
|
||||
<a name="groupbox_parts"></a>
|
||||
## GroupBox Parts
|
||||
The <xref:System.Windows.Controls.GroupBox> control does not have any named parts.
|
||||
|
||||
<a name="groupbox_states"></a>
|
||||
## GroupBox States
|
||||
The following table lists the visual states for the <xref:System.Windows.Controls.GroupBox> control.
|
||||
|
||||
|VisualState Name|VisualStateGroup Name|Description|
|
||||
|-|-|-|
|
||||
|Valid|ValidationStates|The control uses the <xref:System.Windows.Controls.Validation> class and the <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `false`.|
|
||||
|InvalidFocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control has focus.|
|
||||
|InvalidUnfocused|ValidationStates|The <xref:System.Windows.Controls.Validation.HasError%2A?displayProperty=nameWithType> attached property is `true` has the control does not have focus.|
|
||||
|
||||
<a name="groupbox_controltemplate_example"></a>
|
||||
## GroupBox ControlTemplate Example
|
||||
The following example shows how to define a <xref:System.Windows.Controls.ControlTemplate> for the <xref:System.Windows.Controls.GroupBox> control.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#GroupBox](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/groupbox.xaml#groupbox)]
|
||||
|
||||
The <xref:System.Windows.Controls.ControlTemplate> uses one or more of the following resources.
|
||||
|
||||
[!code-xaml[ControlTemplateExamples#Resources](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlTemplateExamples/CS/resources/shared.xaml#resources)]
|
||||
|
||||
For the complete sample, see [Styling with ControlTemplates Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Styles%20&%20Templates/IntroToStylingAndTemplating).
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.FrameworkElement.Style%2A>
|
||||
- <xref:System.Windows.Controls.ControlTemplate>
|
||||
- [Control Styles and Templates](control-styles-and-templates.md)
|
||||
- [Control Customization](control-customization.md)
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
- [Create a template for a control](/dotnet/desktop-wpf/themes/how-to-create-apply-template)
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
title: "GroupBox"
|
||||
ms.date: "03/30/2017"
|
||||
f1_keywords:
|
||||
- "AutoGeneratedOrientationPage"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], GroupBox"
|
||||
- "GroupBox control [WPF]"
|
||||
ms.assetid: 1f4ed3d9-a171-4623-bc4f-3314e3576271
|
||||
---
|
||||
# GroupBox
|
||||
The <xref:System.Windows.Controls.GroupBox> control is a <xref:System.Windows.Controls.HeaderedContentControl> that provides a titled container for graphical user interface (GUI) content.
|
||||
|
||||
The following illustration shows a <xref:System.Windows.Controls.GroupBox> that contains a <xref:System.Windows.Controls.TabControl> and a <xref:System.Windows.Controls.Button> that are enclosed in a <xref:System.Windows.Controls.StackPanel>.
|
||||
|
||||

|
||||
|
||||
## In This Section
|
||||
[Define a GroupBox Template](how-to-define-a-groupbox-template.md)
|
||||
|
||||
## Reference
|
||||
<xref:System.Windows.Controls.GroupBox>
|
||||
|
||||
## Related Sections
|
||||
+125
@@ -0,0 +1,125 @@
|
||||
---
|
||||
title: "Guidelines for Designing Stylable Controls"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "style design for controls [WPF]"
|
||||
- "controls [WPF], style design"
|
||||
ms.assetid: c52dde45-a311-4531-af4c-853371c4d5f4
|
||||
---
|
||||
# Guidelines for Designing Stylable Controls
|
||||
|
||||
This document summarizes a set of best practices to consider when designing a control which you intend to be easily stylable and templatable. We came to this set of best practices through a lot of trial and error while working on the theme control styles for the built-in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] control set. We learned that successful styling is as much a function of a well-designed object model as it is of the style itself. The intended audience for this document is the control author, not the style author.
|
||||
|
||||
<a name="Terminology"></a>
|
||||
|
||||
## Terminology
|
||||
|
||||
"Styling and templating" refer to the suite of technologies that enable a control author to defer the visual aspects of the control to the style and template of the control. This suite of technologies includes:
|
||||
|
||||
- Styles (including property setters, triggers, and storyboards).
|
||||
|
||||
- Resources.
|
||||
|
||||
- Control templates.
|
||||
|
||||
- Data templates.
|
||||
|
||||
For an introduction to styling and templating, see [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview).
|
||||
|
||||
<a name="Before_You_Start__Understanding_Your_Control"></a>
|
||||
|
||||
## Before You Start: Understanding Your Control
|
||||
|
||||
Before you jump into these guidelines, it is important to understand and have defined the common usage of your control. Styling exposes an often unruly set of possibilities. Controls that are written to be used broadly (in many applications, by many developers) face the challenge that styling can be used to make far-reaching changes to the visual appearance of the control. In fact, the styled control may not even resemble the control author's intentions. Since the flexibility offered by styling is essentially boundless, you can use the idea of common usage to help you scope your decisions.
|
||||
|
||||
To understand your control's common usage, it's good to think about the value proposition of the control. What does your control bring to the table that no other control can offer? Common usage does not imply any specific visual appearance, but rather the philosophy of the control and a reasonable set of expectations about its usage. This understanding allows you to make some assumptions about the composition model and the style-defined behaviors of the control in the common case. In the case of <xref:System.Windows.Controls.ComboBox>, for example, understanding the common usage won't give you any insight about whether a particular <xref:System.Windows.Controls.ComboBox> has rounded corners, but it will give you insight into the fact that the <xref:System.Windows.Controls.ComboBox> probably needs a pop-up window and some way of toggling whether it is open.
|
||||
|
||||
<a name="General_Guidelines"></a>
|
||||
|
||||
## General Guidelines
|
||||
|
||||
- **Do not strictly enforce template contracts.** The template contract of a control might consist of elements, commands, bindings, triggers, or even property settings that are required or expected for a control to function properly.
|
||||
|
||||
- Minimize contracts as much as possible.
|
||||
|
||||
- Design around the expectation that during design time (that is, when using a design tool) it is common for a control template to be in an incomplete state. [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] does not offer a "composing" state infrastructure, so controls have to be built with the expectation that such a state might be valid.
|
||||
|
||||
- Do not throw exceptions when any aspect of a template contract is not followed. Along these lines, panels should not throw exceptions if they have too many or too few children.
|
||||
|
||||
- **Factor peripheral functionality into template helper elements.** Each control should be focused on its core functionality and true value proposition and defined by the control's common usage. To that end, use composition and helper elements within the template to enable peripheral behaviors and visualizations, that is, those behaviors and visualizations that do not contribute to the core functionality of the control. Helper elements fall into three categories:
|
||||
|
||||
- **Standalone** helper types are public and reusable controls or primitives that are used "anonymously" in a template, meaning that neither the helper element nor the styled control is aware of the other. Technically, any element can be an anonymous type, but in this context the term describes those types that encapsulate specialized functionality to enable targeted scenarios.
|
||||
|
||||
- **Type-based** helper elements are new types that encapsulate specialized functionality. These elements are typically designed with a narrower range of functionality than common controls or primitives. Unlike standalone helper elements, type-based helper elements are aware of the context in which they are used and typically must share data with the control to whose template they belong.
|
||||
|
||||
- **Named** helper elements are common controls or primitives that a control expects to find within its template by name. These elements are given a well-known name within the template, making it possible for a control to find the element and interact with it programmatically. There can only be one element with a given name in any template.
|
||||
|
||||
The following table shows helper elements employed by control styles today (this list is not exhaustive):
|
||||
|
||||
|Element|Type|Used by|
|
||||
|-------------|----------|-------------|
|
||||
|<xref:System.Windows.Controls.ContentPresenter>|Type-based|<xref:System.Windows.Controls.Button>, <xref:System.Windows.Controls.CheckBox>, <xref:System.Windows.Controls.RadioButton>, <xref:System.Windows.Controls.Frame>, and so on (all <xref:System.Windows.Controls.ContentControl> types)|
|
||||
|<xref:System.Windows.Controls.ItemsPresenter>|Type-based|<xref:System.Windows.Controls.ListBox>, <xref:System.Windows.Controls.ComboBox>, <xref:System.Windows.Controls.Menu>, and so on (all <xref:System.Windows.Controls.ItemsControl> types)|
|
||||
|<xref:System.Windows.Controls.Primitives.ToolBarOverflowPanel>|Named|<xref:System.Windows.Controls.ToolBar>|
|
||||
|<xref:System.Windows.Controls.Primitives.Popup>|Standalone|<xref:System.Windows.Controls.ComboBox>, <xref:System.Windows.Controls.ToolBar>, <xref:System.Windows.Controls.Menu>, <xref:System.Windows.Controls.ToolTip>, and so on|
|
||||
|<xref:System.Windows.Controls.Primitives.RepeatButton>|Named|<xref:System.Windows.Controls.Slider>, <xref:System.Windows.Controls.Primitives.ScrollBar>, and so on|
|
||||
|<xref:System.Windows.Controls.Primitives.ScrollBar>|Named|<xref:System.Windows.Controls.ScrollViewer>|
|
||||
|<xref:System.Windows.Controls.ScrollViewer>|Standalone|<xref:System.Windows.Controls.ListBox>, <xref:System.Windows.Controls.ComboBox>, <xref:System.Windows.Controls.Menu>, <xref:System.Windows.Controls.Frame>, and so on|
|
||||
|<xref:System.Windows.Controls.Primitives.TabPanel>|Standalone|<xref:System.Windows.Controls.TabControl>|
|
||||
|<xref:System.Windows.Controls.TextBox>|Named|<xref:System.Windows.Controls.ComboBox>|
|
||||
|<xref:System.Windows.Controls.Primitives.TickBar>|Type-based|<xref:System.Windows.Controls.Slider>|
|
||||
|
||||
- **Minimize required user-specified bindings or property settings on helper elements**. It is common for a helper element to require certain bindings or property settings in order to function properly within the control template. The helper element and templated control should, as much as possible, establish these settings. When setting properties or establishing bindings, care should be taken to not override values set by the user. Specific best practices are as follows:
|
||||
|
||||
- Named helper elements should be identified by the parent and the parent should establish any required settings on the helper element.
|
||||
|
||||
- Type-based helper elements should establish any required settings directly on themselves. Doing this may require the helper element to query for information context in which it is being used, including its `TemplatedParent` (the control type of the template in which it is being used). For example, <xref:System.Windows.Controls.ContentPresenter> automatically binds the `Content` property of its `TemplatedParent` to its <xref:System.Windows.Controls.ContentPresenter.Content%2A> property when used in a <xref:System.Windows.Controls.ContentControl> derived type.
|
||||
|
||||
- Standalone helper elements cannot be optimized in this way because, by definition, neither the helper element nor the parent knows about the other.
|
||||
|
||||
- **Use the Name property to flag elements within a template**. A control that needs to find an element in its style in order to access it programmatically should do so using the `Name` property and the `FindName` paradigm. A control should not throw an exception when an element is not found, but silently and gracefully disable the functionality which required that element.
|
||||
|
||||
- **Use best practices for expressing control state and behavior in a style.** The following is an ordered list of best practices for expressing control state changes and behavior in a style. You should use the first item on the list that enables your scenario.
|
||||
|
||||
1. Property binding. Example: binding between <xref:System.Windows.Controls.ComboBox.IsDropDownOpen%2A?displayProperty=nameWithType> and <xref:System.Windows.Controls.Primitives.ToggleButton.IsChecked%2A?displayProperty=nameWithType>.
|
||||
|
||||
2. Triggered property changes or property animations. Example: the hover state of a <xref:System.Windows.Controls.Button>.
|
||||
|
||||
3. Command. Example: <xref:System.Windows.Controls.Primitives.ScrollBar.LineUpCommand> / <xref:System.Windows.Controls.Primitives.ScrollBar.LineDownCommand> in <xref:System.Windows.Controls.Primitives.ScrollBar>.
|
||||
|
||||
4. Standalone helper elements. Example: <xref:System.Windows.Controls.Primitives.TabPanel> in <xref:System.Windows.Controls.TabControl>.
|
||||
|
||||
5. Type-based helper types. Example: <xref:System.Windows.Controls.ContentPresenter> in <xref:System.Windows.Controls.Button>, <xref:System.Windows.Controls.Primitives.TickBar> in <xref:System.Windows.Controls.Slider>.
|
||||
|
||||
6. Named helper elements. Example: <xref:System.Windows.Controls.TextBox> in <xref:System.Windows.Controls.ComboBox>.
|
||||
|
||||
7. Bubbled events from named helper types. If you listen for bubbled events from a style element, you should require that the element generating the event can be uniquely identified. Example: <xref:System.Windows.Controls.Primitives.Thumb> in <xref:System.Windows.Controls.ToolBar>.
|
||||
|
||||
8. Custom `OnRender` behavior. Example: <xref:Microsoft.Windows.Themes.ButtonChrome> in <xref:System.Windows.Controls.Button>.
|
||||
|
||||
- **Use style triggers (as opposed to template triggers) sparingly**. Triggers that affect properties on elements in the template must be declared in the template. Triggers that affect properties on the control (no `TargetName`) may be declared in the style unless you know that changing the template should also destroy the trigger.
|
||||
|
||||
- **Be consistent with existing styling patterns.** Many times there are multiple ways to solve a problem. Be aware of and, when possible, consistent with existing control styling patterns. This is especially important for controls that derive from the same base type (for example, <xref:System.Windows.Controls.ContentControl>, <xref:System.Windows.Controls.ItemsControl>, <xref:System.Windows.Controls.Primitives.RangeBase>, and so on).
|
||||
|
||||
- **Expose properties to enable common customization scenarios without retemplating**. [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] does not support pluggable/customizable parts, so a control user is left with only two methods of customization: setting properties directly or setting properties using styles. With that in mind, it is appropriate to surface a limited number of properties targeted at very common, high-priority customization scenarios which would otherwise require the retemplating. Here are best practices for when and how to enable customization scenarios:
|
||||
|
||||
- Very common customizations should be exposed as properties on the control and consumed by the template.
|
||||
|
||||
- Less common (though not rare) customizations should be exposed as attached properties and consumed by the template.
|
||||
|
||||
- It is acceptable for known but rare customizations to require retemplating.
|
||||
|
||||
<a name="Theme_Considerations"></a>
|
||||
|
||||
## Theme Considerations
|
||||
|
||||
- **Theme styles should attempt to have consistent property semantics across all themes, but make no guarantee**. As part of its documentation, your control should have a document describing the control's property semantics, that is, the "meaning" of a property for a control. For example, the <xref:System.Windows.Controls.ComboBox> control should define the meaning of the <xref:System.Windows.Controls.Control.Background%2A> property within <xref:System.Windows.Controls.ComboBox>. The default styles for your control should attempt to follow the semantics defined in that document across all themes. Control users, on the other hand, should be aware that property semantics can change from theme to theme. In certain cases, a given property may not be expressible under the visual constraints required by a particular theme. (The Classic theme, for example, does not have a single border to which `Thickness` can be applied for many controls.)
|
||||
|
||||
- **Theme styles do not need to have consistent trigger semantics across all themes**. The behavior exposed by a control style through triggers or animations may vary from theme to theme. Control users should be aware that a control will not necessarily employ the same mechanism to achieve a particular behavior across all themes. One theme, for example, may use an animation to express hover behavior where another theme uses a trigger. This can result in inconsistencies in behavior preservation on customized controls. (Changing the background property, for example, might not affect the hover state of the control if that state is expressed using a trigger. However, if the hover state is implemented using an animation, changing to background could irreparably break the animation and therefore the state transition.)
|
||||
|
||||
- **Theme styles do not need to have consistent "layout" semantics across all themes**. For example, the default style does not need to guarantee that a control will occupy the same amount of size in all themes or guarantee that a control will have the same content margins / padding across all themes.
|
||||
|
||||
## See also
|
||||
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
- [Control Authoring Overview](control-authoring-overview.md)
|
||||
@@ -0,0 +1,29 @@
|
||||
---
|
||||
title: "How to: Add a Watermark to a TextBox"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "displaying a background image inside a text box to aid user input [WPF]"
|
||||
- "aid usability of a TextBox using a background image [WPF]"
|
||||
ms.assetid: df89bdd8-a0fb-45e0-b312-dd53332d01a8
|
||||
---
|
||||
# How to: Add a Watermark to a TextBox
|
||||
The following example shows how to aid usability of a <xref:System.Windows.Controls.TextBox> by displaying an explanatory background image inside of the <xref:System.Windows.Controls.TextBox> until the user inputs text, at which point the image is removed. In addition, the background image is restored again if the user removes their input. See illustration below.
|
||||
|
||||

|
||||
|
||||
> [!NOTE]
|
||||
> The reason a background image is used in this example rather then simply manipulating the <xref:System.Windows.Controls.TextBox.Text%2A> property of <xref:System.Windows.Controls.TextBox>, is that a background image will not interfere with data binding.
|
||||
|
||||
## Example
|
||||
[!code-xaml[TextBoxMiscSnippets_snip#TextBoxBackgroundExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/TextBoxMiscSnippets_snip/csharp/textbox_with_background_image.xaml#textboxbackgroundexamplewholepage)]
|
||||
|
||||
[!code-csharp[TextBoxMiscSnippets_snip#TextBoxBackgroundCodeExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/TextBoxMiscSnippets_snip/csharp/textbox_with_background_image.xaml.cs#textboxbackgroundcodeexamplewholepage)]
|
||||
[!code-vb[TextBoxMiscSnippets_snip#TextBoxBackgroundCodeExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/TextBoxMiscSnippets_snip/visualbasic/textbox_with_background_image.xaml.vb#textboxbackgroundcodeexamplewholepage)]
|
||||
|
||||
## See also
|
||||
|
||||
- [TextBox Overview](textbox-overview.md)
|
||||
- [RichTextBox Overview](richtextbox-overview.md)
|
||||
+64
@@ -0,0 +1,64 @@
|
||||
---
|
||||
title: "How to: Add Row Details to a DataGrid Control"
|
||||
description: Learn how to customize the data presentation when using the Windows Presentation Foundation DataGrid control by adding a row details section.
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "DataTemplate [WPF], DataGrid"
|
||||
- "row details [WPF], DataGrid"
|
||||
- "DataGrid [WPF], row details"
|
||||
ms.assetid: 0bdc6f50-9b4c-483f-9df6-a47a1fde998b
|
||||
---
|
||||
# How to: Add Row Details to a DataGrid Control
|
||||
When using the <xref:System.Windows.Controls.DataGrid> control, you can customize the data presentation by adding a row details section. Adding a row details section enables you to group some data in a template that is optionally visible or collapsed. For example, you can add row details to a <xref:System.Windows.Controls.DataGrid> that presents only a summary of the data for each row in the <xref:System.Windows.Controls.DataGrid>, but presents more data fields when the user selects a row. You define the template for the row details section in the <xref:System.Windows.Controls.DataGrid.RowDetailsTemplate%2A> property. The following illustration shows an example of a row details section.
|
||||
|
||||

|
||||
|
||||
You define the row details template as either inline XAML or as a resource. Both approaches are shown in the following procedures. A data template that is added as a resource can be used throughout the project without re-creating the template. A data template that is added as inline XAML is only accessible from the control where it is defined.
|
||||
|
||||
### To display row details by using inline XAML
|
||||
|
||||
1. Create a <xref:System.Windows.Controls.DataGrid> that displays data from a data source.
|
||||
|
||||
2. In the <xref:System.Windows.Controls.DataGrid> element, add a <xref:System.Windows.Controls.DataGrid.RowDetailsTemplate%2A> element.
|
||||
|
||||
3. Create a <xref:System.Windows.DataTemplate> that defines the appearance of the row details section.
|
||||
|
||||
The following XAML shows the <xref:System.Windows.Controls.DataGrid> and how to define the <xref:System.Windows.Controls.DataGrid.RowDetailsTemplate%2A> inline. The <xref:System.Windows.Controls.DataGrid> displays three values in each row and three more values when the row is selected.
|
||||
|
||||
[!code-xaml[DataGrid_RowDetails#1](~/samples/snippets/csharp/VS_Snippets_Wpf/datagrid_rowdetails/cs/mainwindow.xaml#1)]
|
||||
|
||||
The following code shows the query that is used to select the data that is displayed in the <xref:System.Windows.Controls.DataGrid>. In this example, the query selects data from an entity that contains customer information.
|
||||
|
||||
[!code-csharp[DataGrid_RowDetails#2](~/samples/snippets/csharp/VS_Snippets_Wpf/datagrid_rowdetails/cs/mainwindow.xaml.cs#2)]
|
||||
[!code-vb[DataGrid_RowDetails#2](~/samples/snippets/visualbasic/VS_Snippets_Wpf/datagrid_rowdetails/vb/mainwindow.xaml.vb#2)]
|
||||
|
||||
### To display row details by using a resource
|
||||
|
||||
1. Create a <xref:System.Windows.Controls.DataGrid> that displays data from a data source.
|
||||
|
||||
2. Add a <xref:System.Windows.FrameworkElement.Resources%2A> element to the root element, such as a <xref:System.Windows.Window> control or a <xref:System.Windows.Controls.Page> control, or add a <xref:System.Windows.Application.Resources%2A> element to the <xref:System.Windows.Application> class in the App.xaml (or Application.xaml) file.
|
||||
|
||||
3. In the resources element, create a <xref:System.Windows.DataTemplate> that defines the appearance of the row details section.
|
||||
|
||||
The following XAML shows the <xref:System.Windows.Controls.DataGrid.RowDetailsTemplate%2A> defined in the <xref:System.Windows.Application> class.
|
||||
|
||||
[!code-xaml[DataGrid_RowDetails#3](~/samples/snippets/csharp/VS_Snippets_Wpf/datagrid_rowdetails/cs/app.xaml#3)]
|
||||
|
||||
4. On the <xref:System.Windows.DataTemplate>, set the [x:Key Directive](/dotnet/desktop-wpf/xaml-services/xkey-directive) to a value that uniquely identifies the data template.
|
||||
|
||||
5. In the <xref:System.Windows.Controls.DataGrid> element, set the <xref:System.Windows.Controls.DataGrid.RowDetailsTemplate%2A> property to the resource defined in the previous steps. Assign the resource as a static resource.
|
||||
|
||||
The following XAML shows the <xref:System.Windows.Controls.DataGrid.RowDetailsTemplate%2A> property set to the resource from the previous example.
|
||||
|
||||
[!code-xaml[DataGrid_RowDetails#4](~/samples/snippets/csharp/VS_Snippets_Wpf/datagrid_rowdetails/cs/window2.xaml#4)]
|
||||
|
||||
### To set visibility and prevent horizontal scrolling for row details
|
||||
|
||||
1. If needed, set the <xref:System.Windows.Controls.DataGrid.RowDetailsVisibilityMode%2A> property to a <xref:System.Windows.Controls.DataGridRowDetailsVisibilityMode> value.
|
||||
|
||||
By default, the value is set to <xref:System.Windows.Controls.DataGridRowDetailsVisibilityMode.VisibleWhenSelected>. You can set it to <xref:System.Windows.Controls.DataGridRowDetailsVisibilityMode.Visible> to show the details for all of the rows or <xref:System.Windows.Controls.DataGridRowDetailsVisibilityMode.Collapsed> to hide the details for all rows.
|
||||
|
||||
2. If needed, set the <xref:System.Windows.Controls.DataGrid.AreRowDetailsFrozen%2A> property to `true` to prevent the row details section from scrolling horizontally.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: "How to: Adorn the Children of a Panel"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "adorners [WPF], binding to children of Panels"
|
||||
- "Panel control [WPF], binding adorners to children"
|
||||
ms.assetid: 4cc9b972-b472-4e5c-bdf3-3702d7fbb1f5
|
||||
---
|
||||
# How to: Adorn the Children of a Panel
|
||||
This example shows how to programmatically bind an adorner to the children of a specified <xref:System.Windows.Controls.Panel>.
|
||||
|
||||
## Example
|
||||
To bind an adorner to the children of a <xref:System.Windows.Controls.Panel>, follow these steps:
|
||||
|
||||
1. Declare a new <xref:System.Windows.Documents.AdornerLayer> object and call the `static`<xref:System.Windows.Documents.AdornerLayer.GetAdornerLayer%2A> method to find an adorner layer for the element whose children are to be adorned.
|
||||
|
||||
2. Enumerate through the children of the parent element and call the <xref:System.Windows.Documents.AdornerLayer.Add%2A> method to bind an adorner to each child element.
|
||||
|
||||
The following example binds a SimpleCircleAdorner (shown above) to the children of a <xref:System.Windows.Controls.StackPanel> named *myStackPanel*.
|
||||
|
||||
[!code-csharp[Adorners_SimpleCircleAdorner#_AdornChildren](~/samples/snippets/csharp/VS_Snippets_Wpf/Adorners_SimpleCircleAdorner/CSharp/Window1.xaml.cs#_adornchildren)]
|
||||
[!code-vb[Adorners_SimpleCircleAdorner#_AdornChildren](~/samples/snippets/visualbasic/VS_Snippets_Wpf/Adorners_SimpleCircleAdorner/VisualBasic/Window1.xaml.vb#_adornchildren)]
|
||||
|
||||
> [!NOTE]
|
||||
> Using [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] to bind an adorner to another element is currently not supported.
|
||||
|
||||
## See also
|
||||
|
||||
- [Adorners Overview](adorners-overview.md)
|
||||
@@ -0,0 +1,30 @@
|
||||
---
|
||||
title: "How to: Animate a BorderThickness Value"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "border thickness [WPF], animating changes to"
|
||||
- "animation [WPF], changes to border thickness"
|
||||
ms.assetid: fd021978-f74b-4e7b-a7f7-3987dcad9e0f
|
||||
---
|
||||
# How to: Animate a BorderThickness Value
|
||||
This example shows how to animate changes to the thickness of a border by using the <xref:System.Windows.Media.Animation.ThicknessAnimation> class.
|
||||
|
||||
## Example
|
||||
The following example animates the thickness of a border by using <xref:System.Windows.Media.Animation.ThicknessAnimation>. The example uses the <xref:System.Windows.Controls.Border.BorderThickness%2A> property of <xref:System.Windows.Controls.Border>.
|
||||
|
||||
[!code-csharp[BasicAnimations_snip#ThicknessAnimationWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/BasicAnimations_snip/CSharp/ThicknessAnimationExample.cs#thicknessanimationwholepage)]
|
||||
[!code-vb[BasicAnimations_snip#ThicknessAnimationWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BasicAnimations_snip/VisualBasic/ThicknessAnimationExample.vb#thicknessanimationwholepage)]
|
||||
|
||||
For the complete sample, see [Animation Example Gallery](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/AnimationExamples).
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Media.Animation.ThicknessAnimation>
|
||||
- <xref:System.Windows.Controls.Border.BorderThickness%2A>
|
||||
- <xref:System.Windows.Controls.Border>
|
||||
- [Animation Overview](../graphics-multimedia/animation-overview.md)
|
||||
- [Animation and Timing How-to Topics](../graphics-multimedia/animation-and-timing-how-to-topics.md)
|
||||
- [Animate the Thickness of a Border by Using Key Frames](../graphics-multimedia/how-to-animate-the-thickness-of-a-border-by-using-key-frames.md)
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
title: "How to: Animate a Popup"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "Popup control [WPF], animating"
|
||||
- "animation [WPF], Popup controls"
|
||||
ms.assetid: acaa2a0a-6137-4efd-9cd1-75ece222e390
|
||||
---
|
||||
# How to: Animate a Popup
|
||||
This example shows two ways to animate a <xref:System.Windows.Controls.Primitives.Popup> control.
|
||||
|
||||
## Example
|
||||
The following example sets the <xref:System.Windows.Controls.Primitives.PopupAnimation> property to a value of <xref:System.Windows.Controls.Primitives.PopupAnimation.Slide>, which causes the <xref:System.Windows.Controls.Primitives.Popup> to "slide-in" when it appears.
|
||||
|
||||
In order to rotate the <xref:System.Windows.Controls.Primitives.Popup>, this example assigns a <xref:System.Windows.Media.RotateTransform> to the <xref:System.Windows.UIElement.RenderTransform%2A> property on the <xref:System.Windows.Controls.Canvas>, which is the child element of the <xref:System.Windows.Controls.Primitives.Popup>.
|
||||
|
||||
For the transform to work correctly, the example must set the <xref:System.Windows.Controls.Primitives.Popup.AllowsTransparency%2A> property to `true`. In addition, the <xref:System.Windows.FrameworkElement.Margin%2A> on the <xref:System.Windows.Controls.Canvas> content must specify enough space for the <xref:System.Windows.Controls.Primitives.Popup> to rotate.
|
||||
|
||||
[!code-xaml[AnimatedPopup#RotateTransform2](~/samples/snippets/csharp/VS_Snippets_Wpf/AnimatedPopup/CS/Window1.xaml#rotatetransform2)]
|
||||
|
||||
The following example shows how a <xref:System.Windows.Controls.Primitives.ButtonBase.Click> event, which occurs when a <xref:System.Windows.Controls.Button> is clicked, triggers the <xref:System.Windows.Media.Animation.Storyboard> that starts the animation.
|
||||
|
||||
[!code-xaml[AnimatedPopup#RotateTransform1](~/samples/snippets/csharp/VS_Snippets_Wpf/AnimatedPopup/CS/Window1.xaml#rotatetransform1)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.UIElement.RenderTransform%2A>
|
||||
- <xref:System.Windows.Controls.Primitives.BulletDecorator>
|
||||
- <xref:System.Windows.Media.RotateTransform>
|
||||
- <xref:System.Windows.Media.Animation.Storyboard>
|
||||
- <xref:System.Windows.Controls.Primitives.Popup>
|
||||
- [How-to Topics](popup-how-to-topics.md)
|
||||
- [Popup Overview](popup-overview.md)
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
---
|
||||
title: "How to: Apply Stretch Properties to the Contents of a Viewbox"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "StretchDirection properties [WPF]"
|
||||
- "Stretch properties [WPF]"
|
||||
- "controls [WPF], Viewbox"
|
||||
- "Viewbox control [WPF]"
|
||||
ms.assetid: b9c22ef4-bce4-4300-9e0c-8260b7db83cc
|
||||
---
|
||||
# How to: Apply Stretch Properties to the Contents of a Viewbox
|
||||
## Example
|
||||
This example shows how to change the value of the <xref:System.Windows.Controls.Viewbox.StretchDirection%2A> and <xref:System.Windows.Controls.Viewbox.Stretch%2A> properties of a <xref:System.Windows.Controls.Viewbox>.
|
||||
|
||||
The first example uses [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] to define a <xref:System.Windows.Controls.Viewbox> element. It assigns a <xref:System.Windows.FrameworkElement.MaxWidth%2A> and <xref:System.Windows.FrameworkElement.MaxHeight%2A> of 400. The example nests an <xref:System.Windows.Controls.Image> element within the <xref:System.Windows.Controls.Viewbox>. <xref:System.Windows.Controls.Button> elements that correspond to the property values for the <xref:System.Windows.Controls.Viewbox.Stretch%2A> and <xref:System.Windows.Controls.StretchDirection> enumerations manipulate the stretching behavior of the nested <xref:System.Windows.Controls.Image>.
|
||||
|
||||
[!code-xaml[viewboxStretchLayoutSamp#1](~/samples/snippets/csharp/VS_Snippets_Wpf/viewboxStretchLayoutSamp/CSharp/Window1.xaml#1)]
|
||||
|
||||
The following code-behind file handles the <xref:System.Windows.Controls.Button> <xref:System.Windows.Controls.Primitives.ButtonBase.Click> events that the previous [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] example defines.
|
||||
|
||||
[!code-csharp[viewboxStretchLayoutSamp#2](~/samples/snippets/csharp/VS_Snippets_Wpf/viewboxStretchLayoutSamp/CSharp/Window1.xaml.cs#2)]
|
||||
[!code-vb[viewboxStretchLayoutSamp#2](~/samples/snippets/visualbasic/VS_Snippets_Wpf/viewboxStretchLayoutSamp/VisualBasic/Window1.xaml.vb#2)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.Viewbox>
|
||||
- <xref:System.Windows.Media.Stretch>
|
||||
- <xref:System.Windows.Controls.StretchDirection>
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
title: "How to: Bind a ListBox to Data"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "ListBox controls [WPF], binding data to"
|
||||
- "data binding [WPF], ListBox control"
|
||||
- "binding data [WPF], to ListBox control"
|
||||
ms.assetid: de93a907-709a-44a7-84bf-578b846a3d8b
|
||||
---
|
||||
# How to: Bind a ListBox to Data
|
||||
An application developer can create <xref:System.Windows.Controls.ListBox> controls without specifying the contents of each <xref:System.Windows.Controls.ListBoxItem> separately. You can use data binding to bind data to the individual items.
|
||||
|
||||
The following example shows how to create a <xref:System.Windows.Controls.ListBox> that populates the <xref:System.Windows.Controls.ListBoxItem> elements by data binding to a data source called *Colors*. In this case it is not necessary to use <xref:System.Windows.Controls.ListBoxItem> tags to specify the content of each item.
|
||||
|
||||
## Example
|
||||
[!code-xaml[ListBoxEvent#7](~/samples/snippets/csharp/VS_Snippets_Wpf/ListBoxEvent/CSharp/Pane1.xaml#7)]
|
||||
[!code-xaml[ListBoxEvent#3](~/samples/snippets/csharp/VS_Snippets_Wpf/ListBoxEvent/CSharp/Pane1.xaml#3)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.ListBox>
|
||||
- <xref:System.Windows.Controls.ListBoxItem>
|
||||
- [Controls](../advanced/optimizing-performance-controls.md)
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
---
|
||||
title: "How to: Bind a TreeView to Data That Has an Indeterminable Depth"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "TreeView control [WPF], binding to data of indeterminate depth"
|
||||
ms.assetid: daddcd74-1b0f-4ffd-baeb-ec934c5e0f53
|
||||
---
|
||||
# How to: Bind a TreeView to Data That Has an Indeterminable Depth
|
||||
There might be times when you want to bind a <xref:System.Windows.Controls.TreeView> to a data source whose depth is not known. This can occur when the data is recursive in nature, such as a file system, where folders can contain folders, or a company's organizational structure, where employees have other employees as direct reports.
|
||||
|
||||
The data source must have a hierarchical object model. For example, an `Employee` class might contain a collection of Employee objects that are the direct reports of an employee. If the data is represented in a way that is not hierarchical, you must build a hierarchical representation of the data.
|
||||
|
||||
When you set the <xref:System.Windows.Controls.ItemsControl.ItemTemplate%2A?displayProperty=nameWithType> property and if the <xref:System.Windows.Controls.ItemsControl> generates an <xref:System.Windows.Controls.ItemsControl> for each child item, then the child <xref:System.Windows.Controls.ItemsControl> uses the same <xref:System.Windows.Controls.ItemsControl.ItemTemplate%2A> as the parent. For example, if you set the <xref:System.Windows.Controls.ItemsControl.ItemTemplate%2A> property on a data-bound <xref:System.Windows.Controls.TreeView>, each <xref:System.Windows.Controls.TreeViewItem> that is generated uses the <xref:System.Windows.DataTemplate> that was assigned to the <xref:System.Windows.Controls.ItemsControl.ItemTemplate%2A> property of the <xref:System.Windows.Controls.TreeView>.
|
||||
|
||||
The <xref:System.Windows.HierarchicalDataTemplate> enables you to specify the <xref:System.Windows.Controls.ItemsControl.ItemsSource%2A> for a <xref:System.Windows.Controls.TreeViewItem>, or any <xref:System.Windows.Controls.HeaderedItemsControl>, on the data template. When you set the <xref:System.Windows.HierarchicalDataTemplate.ItemsSource%2A?displayProperty=nameWithType> property, that value is used when the <xref:System.Windows.HierarchicalDataTemplate> is applied. By using a <xref:System.Windows.HierarchicalDataTemplate>, you can recursively set the <xref:System.Windows.Controls.ItemsControl.ItemsSource%2A> for each <xref:System.Windows.Controls.TreeViewItem> in the <xref:System.Windows.Controls.TreeView>.
|
||||
|
||||
## Example
|
||||
The following example demonstrates how to bind a <xref:System.Windows.Controls.TreeView> to hierarchical data and use a <xref:System.Windows.HierarchicalDataTemplate> to specify the <xref:System.Windows.Controls.ItemsControl.ItemsSource%2A> for each <xref:System.Windows.Controls.TreeViewItem>. The <xref:System.Windows.Controls.TreeView> binds to XML data that represents the employees in a company. Each `Employee` element can contain other `Employee` elements to indicate who reports to whom. Because the data is recursive, the <xref:System.Windows.HierarchicalDataTemplate> can be applied to each level.
|
||||
|
||||
[!code-xaml[TreeViewWithUnknownDepth#1](~/samples/snippets/csharp/VS_Snippets_Wpf/TreeViewWithUnknownDepth/CS/Window1.xaml#1)]
|
||||
|
||||
## See also
|
||||
|
||||
- [Data Binding Overview](/dotnet/desktop-wpf/data/data-binding-overview)
|
||||
- [Data Templating Overview](../data/data-templating-overview.md)
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: "How to: Bind an Adorner to an Element"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "UIElements [WPF], binding adorners to"
|
||||
- "adorners [WPF], binding to specified UIElements"
|
||||
ms.assetid: b2101611-a0ee-4137-bdb8-9b3673d2e6b9
|
||||
---
|
||||
# How to: Bind an Adorner to an Element
|
||||
This example shows how to programmatically bind an adorner to a specified <xref:System.Windows.UIElement>.
|
||||
|
||||
## Example
|
||||
To bind an adorner to a particular <xref:System.Windows.UIElement>, follow these steps:
|
||||
|
||||
1. Call the `static` method <xref:System.Windows.Documents.AdornerLayer.GetAdornerLayer%2A> to get an <xref:System.Windows.Documents.AdornerLayer> object for the <xref:System.Windows.UIElement> to be adorned. <xref:System.Windows.Documents.AdornerLayer.GetAdornerLayer%2A> walks up the visual tree, starting at the specified **UIElement**, and returns the first adorner layer it finds. (If no adorner layers are found, the method returns null.)
|
||||
|
||||
2. Call the <xref:System.Windows.Documents.AdornerLayer.Add%2A> method to bind the adorner to the target **UIElement**.
|
||||
|
||||
The following example binds a SimpleCircleAdorner (shown above) to a <xref:System.Windows.Controls.TextBox> named *myTextBox*.
|
||||
|
||||
[!code-csharp[Adorners_SimpleCircleAdorner#_AdornSingleElement](~/samples/snippets/csharp/VS_Snippets_Wpf/Adorners_SimpleCircleAdorner/CSharp/Window1.xaml.cs#_adornsingleelement)]
|
||||
[!code-vb[Adorners_SimpleCircleAdorner#_AdornSingleElement](~/samples/snippets/visualbasic/VS_Snippets_Wpf/Adorners_SimpleCircleAdorner/VisualBasic/Window1.xaml.vb#_adornsingleelement)]
|
||||
|
||||
> [!NOTE]
|
||||
> Using [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] to bind an adorner to another element is currently not supported.
|
||||
|
||||
## See also
|
||||
|
||||
- [Adorners Overview](adorners-overview.md)
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: "How to: Build a Standard UI Dialog Box by Using Grid"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "dialog boxes [WPF], creating"
|
||||
- "Grid control [WPF], creating [WPF], dialog box"
|
||||
ms.assetid: d6ac3d51-844b-4d29-96d8-81a696a7b960
|
||||
---
|
||||
# How to: Build a Standard UI Dialog Box by Using Grid
|
||||
This example shows how to create a standard [!INCLUDE[TLA#tla_ui](../../../includes/tlasharptla-ui-md.md)] dialog box by using the <xref:System.Windows.Controls.Grid> element.
|
||||
|
||||
## Example
|
||||
The following example creates a dialog box like the **Run** dialog box in the Windows operating system.
|
||||
|
||||
The example creates a <xref:System.Windows.Controls.Grid> and uses the <xref:System.Windows.Controls.ColumnDefinition> and <xref:System.Windows.Controls.RowDefinition> classes to define five columns and four rows.
|
||||
|
||||
The example then adds and positions an <xref:System.Windows.Controls.Image>, `RunIcon.png`, to represent the image that is found in the dialog box. The image is placed in the first column and row of the <xref:System.Windows.Controls.Grid> (the upper-left corner).
|
||||
|
||||
Next, the example adds a <xref:System.Windows.Controls.TextBlock> element to the first column, which spans the remaining columns of the first row. It adds another <xref:System.Windows.Controls.TextBlock> element to the second row in the first column, to represent the **Open** text box. A <xref:System.Windows.Controls.TextBlock> follows, which represents the data entry area.
|
||||
|
||||
Finally, the example adds three <xref:System.Windows.Controls.Button> elements to the final row, which represent the **OK**, **Cancel**, and **Browse** events.
|
||||
|
||||
[!code-csharp[GridRunDialog#1](~/samples/snippets/csharp/VS_Snippets_Wpf/GridRunDialog/CSharp/window1.xaml.cs#1)]
|
||||
[!code-vb[GridRunDialog#1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GridRunDialog/VisualBasic/grid_vb.vb#1)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.Grid>
|
||||
- <xref:System.Windows.GridUnitType>
|
||||
- [Panels Overview](panels-overview.md)
|
||||
- [How-to Topics](grid-how-to-topics.md)
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
---
|
||||
title: "How to: Change the Horizontal Alignment of a Column in a ListView"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "ListView controls [WPF], horizontal alignment [WPF]"
|
||||
ms.assetid: b9573e44-9dad-4d14-939c-7859ca372758
|
||||
---
|
||||
# How to: Change the Horizontal Alignment of a Column in a ListView
|
||||
By default, the content of each column in a <xref:System.Windows.Controls.ListViewItem> is left-aligned. You can change the alignment of each column by providing a <xref:System.Windows.DataTemplate> and setting the <xref:System.Windows.FrameworkElement.HorizontalAlignment%2A> property on the element within the <xref:System.Windows.DataTemplate>. This topic shows how a <xref:System.Windows.Controls.ListView> aligns its content by default and how to change the alignment of one column in a <xref:System.Windows.Controls.ListView>.
|
||||
|
||||
## Example
|
||||
In the following example, the data in the `Title` and `ISBN` columns is left-aligned.
|
||||
|
||||
[!code-xaml[ListViewHowTos#1](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewHowTos/CSharp/Window1.xaml#1)]
|
||||
[!code-xaml[ListViewHowTos#2](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewHowTos/CSharp/Window1.xaml#2)]
|
||||
|
||||
To change the alignment of the `ISBN` column, you need to specify that the <xref:System.Windows.Controls.Control.HorizontalContentAlignment%2A> property of each <xref:System.Windows.Controls.ListViewItem> is <xref:System.Windows.HorizontalAlignment.Stretch>, so that the elements in each <xref:System.Windows.Controls.ListViewItem> can span or be positioned along the entire width of each column. Because the <xref:System.Windows.Controls.ListView> is bound to a data source, you need to create a style that sets the <xref:System.Windows.Controls.Control.HorizontalContentAlignment%2A>. Next, you need to use a <xref:System.Windows.DataTemplate> to display the content instead of using the <xref:System.Windows.Controls.GridViewColumn.DisplayMemberBinding%2A> property. To display the `ISBN` of each template, the <xref:System.Windows.DataTemplate> can just contain a <xref:System.Windows.Controls.TextBlock> that has its <xref:System.Windows.FrameworkElement.HorizontalAlignment%2A> property set to <xref:System.Windows.HorizontalAlignment.Right>.
|
||||
|
||||
The following example defines the style and <xref:System.Windows.DataTemplate> necessary to make the `ISBN` column right-aligned, and changes the <xref:System.Windows.Controls.GridViewColumn> to reference the <xref:System.Windows.DataTemplate>.
|
||||
|
||||
[!code-xaml[ListViewHowTos#3](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewHowTos/CSharp/Window1.xaml#3)]
|
||||
[!code-xaml[ListViewHowTos#4](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewHowTos/CSharp/Window1.xaml#4)]
|
||||
|
||||
## See also
|
||||
|
||||
- [Data Binding Overview](/dotnet/desktop-wpf/data/data-binding-overview)
|
||||
- [Data Templating Overview](../data/data-templating-overview.md)
|
||||
- [Bind to XML Data Using an XMLDataProvider and XPath Queries](../data/how-to-bind-to-xml-data-using-an-xmldataprovider-and-xpath-queries.md)
|
||||
- [ListView Overview](listview-overview.md)
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: "How to: Choose Between StackPanel and DockPanel"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
- "cpp"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], DockPanel"
|
||||
- "DockPanel control [WPF], StackPanel control compared to"
|
||||
- "StackPanel control [WPF], DockPanel control compared to"
|
||||
- "controls [WPF], StackPanel"
|
||||
ms.assetid: f9239086-451f-42e6-81f7-ef89ef349742
|
||||
---
|
||||
# How to: Choose Between StackPanel and DockPanel
|
||||
This example shows how to choose between using a <xref:System.Windows.Controls.StackPanel> or a <xref:System.Windows.Controls.DockPanel> when you stack content in a <xref:System.Windows.Controls.Panel>.
|
||||
|
||||
## Example
|
||||
Although you can use either <xref:System.Windows.Controls.DockPanel> or <xref:System.Windows.Controls.StackPanel> to stack child elements, the two controls do not always produce the same results. For example, the order that you place child elements can affect the size of child elements in a <xref:System.Windows.Controls.DockPanel> but not in a <xref:System.Windows.Controls.StackPanel>. This different behavior occurs because <xref:System.Windows.Controls.StackPanel> measures in the direction of stacking at [Double.PositiveInfinity](xref:System.Double.PositiveInfinity); however, <xref:System.Windows.Controls.DockPanel> measures only the available size.
|
||||
|
||||
The following example demonstrates this key difference between <xref:System.Windows.Controls.DockPanel> and <xref:System.Windows.Controls.StackPanel>.
|
||||
|
||||
[!code-cpp[StackPanelOvw4#1](~/samples/snippets/cpp/VS_Snippets_Wpf/StackPanelOvw4/CPP/StackPanel_Ovw_Sample4.cpp#1)]
|
||||
[!code-csharp[StackPanelOvw4#1](~/samples/snippets/csharp/VS_Snippets_Wpf/StackPanelOvw4/CSharp/StackPanel_Ovw_Sample4.cs#1)]
|
||||
[!code-vb[StackPanelOvw4#1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/StackPanelOvw4/VisualBasic/StackPanelSamp.vb#1)]
|
||||
[!code-xaml[StackPanelOvw4#1](~/samples/snippets/xaml/VS_Snippets_Wpf/StackPanelOvw4/XAML/default.xaml#1)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.StackPanel>
|
||||
- <xref:System.Windows.Controls.DockPanel>
|
||||
- [Panels Overview](panels-overview.md)
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: "How to: Convert an Image to Greyscale"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "images [WPF], converting to grayscale"
|
||||
- "converting [WPF], images to grayscale"
|
||||
- "grayscale [WPF], converting images to"
|
||||
ms.assetid: 77935ff0-4500-4307-9710-96999dcf579f
|
||||
---
|
||||
# How to: Convert an Image to Greyscale
|
||||
This example shows how to convert an image to grayscale using <xref:System.Windows.Media.Imaging.FormatConvertedBitmap>.
|
||||
|
||||
## Example
|
||||
[!code-xaml[ImagingSnippetGallery_snip#FormatConvertedBitmapXamlExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/ImagingSnippetGallery_snip/CS/FormatConvertedBitmapExample.xaml#formatconvertedbitmapxamlexamplewholepage)]
|
||||
|
||||
[!code-csharp[ImagingSnippetGallery_procedural_snip#FormatConvertedBitmapCodeExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/ImagingSnippetGallery_procedural_snip/CSharp/FormatConvertedBitmapExample.cs#formatconvertedbitmapcodeexamplewholepage)]
|
||||
[!code-vb[ImagingSnippetGallery_procedural_snip#FormatConvertedBitmapCodeExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ImagingSnippetGallery_procedural_snip/VB/FormatConvertedBitmapExample.vb#formatconvertedbitmapcodeexamplewholepage)]
|
||||
|
||||
## See also
|
||||
|
||||
- [Use the Image Element](how-to-use-the-image-element.md)
|
||||
- [Crop an Image](how-to-crop-an-image.md)
|
||||
- [Rotate an Image](how-to-rotate-an-image.md)
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "How to: Create a Button That Has an Image"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "Button controls [WPF], creating"
|
||||
ms.assetid: 607a193c-4098-4dd8-8dc0-51256cec2020
|
||||
---
|
||||
# How to: Create a Button That Has an Image
|
||||
This example shows how to include an image on a <xref:System.Windows.Controls.Button>.
|
||||
|
||||
## Example
|
||||
The following example creates two <xref:System.Windows.Controls.Button> controls. One <xref:System.Windows.Controls.Button> contains text and the other contains an image. The image is in a folder called data, which is a subfolder of the example’s project folder. When a user clicks the <xref:System.Windows.Controls.Button> that has the image, the background and the text of the other <xref:System.Windows.Controls.Button> change.
|
||||
|
||||
This example creates <xref:System.Windows.Controls.Button> controls by using markup but uses code to write the <xref:System.Windows.Controls.Primitives.ButtonBase.Click> event handlers.
|
||||
|
||||
[!code-xaml[BtnColor#4](~/samples/snippets/csharp/VS_Snippets_Wpf/BtnColor/CSharp/Pane1.xaml#4)]
|
||||
|
||||
[!code-csharp[BtnColor#6](~/samples/snippets/csharp/VS_Snippets_Wpf/BtnColor/CSharp/Pane1.xaml.cs#6)]
|
||||
[!code-vb[BtnColor#6](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BtnColor/VisualBasic/Pane1.xaml.vb#6)]
|
||||
|
||||
## See also
|
||||
|
||||
- [Controls](index.md)
|
||||
- [Control Library](control-library.md)
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
title: "How to create a complex Grid"
|
||||
description: "An example on how to use a Grid control to create a layout that looks like a monthly calendar."
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "calendar [WPF], creating"
|
||||
- "monthly calendar [WPF], creating"
|
||||
- "Grid control [WPF], creating [WPF], complex grid"
|
||||
ms.assetid: 4ce3040a-a156-4364-9596-98ca1eca5550
|
||||
---
|
||||
# How to create a complex Grid
|
||||
|
||||
This example shows how to use a <xref:System.Windows.Controls.Grid> control to create a layout that looks like a monthly calendar.
|
||||
|
||||
## Example
|
||||
|
||||
The following example defines eight rows and eight columns by using the <xref:System.Windows.Controls.RowDefinition> and <xref:System.Windows.Controls.ColumnDefinition> classes. It uses the <xref:System.Windows.Controls.Grid.ColumnSpan%2A?displayProperty=nameWithType> and <xref:System.Windows.Controls.Grid.RowSpan%2A?displayProperty=nameWithType> attached properties, together with <xref:System.Windows.Shapes.Rectangle> elements, which fill the backgrounds of various columns and rows. This design is possible because more than one element can exist in each cell in a <xref:System.Windows.Controls.Grid>, a principle difference between <xref:System.Windows.Controls.Grid> and <xref:System.Windows.Documents.Table>.
|
||||
|
||||
The example uses vertical gradients to <xref:System.Windows.Shapes.Shape.Fill%2A> the columns and rows to improve the visual presentation and readability of the calendar. Styled <xref:System.Windows.Controls.TextBlock> elements represent the dates and days of the week. <xref:System.Windows.Controls.TextBlock> elements are absolutely positioned within their cells by using the <xref:System.Windows.FrameworkElement.Margin%2A> property and alignment properties that are defined within the style for the application.
|
||||
|
||||
[!code-xaml[GridComplex#1](~/samples/snippets/csharp/VS_Snippets_Wpf/GridComplex/CS/default.xaml#1)]
|
||||
|
||||
The following image shows the resulting control, a customizable calendar:
|
||||
|
||||

|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.Grid?displayProperty=nameWithType>
|
||||
- <xref:System.Windows.Documents.TableCell?displayProperty=nameWithType>
|
||||
- [Painting with Solid Colors and Gradients Overview](../graphics-multimedia/painting-with-solid-colors-and-gradients-overview.md)
|
||||
- [Panels Overview](panels-overview.md)
|
||||
- [Table Overview](../advanced/table-overview.md)
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
---
|
||||
title: "How to: Create a Control That Has an Access Key and Text Wrapping"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "access keys [WPF], control for"
|
||||
- "controls [WPF], text wrapping"
|
||||
- "wrapping text [WPF]"
|
||||
- "keys [WPF], control for"
|
||||
- "controls [WPF], access keys"
|
||||
- "text wrapping [WPF]"
|
||||
ms.assetid: 205099d9-2551-4302-a25e-a15af9f67e04
|
||||
---
|
||||
# How to: Create a Control That Has an Access Key and Text Wrapping
|
||||
This example shows how to create a control that has an access key and supports text wrapping. The example uses a <xref:System.Windows.Controls.Label> control to illustrate these concepts.
|
||||
|
||||
## Example
|
||||
**Add Text Wrapping to Your Label**
|
||||
|
||||
The <xref:System.Windows.Controls.Label> control does not support text wrapping. If you need a label that wraps across multiple lines, you can nest another element that does support text wrapping and put the element inside the label. The following example shows how to use a <xref:System.Windows.Controls.TextBlock> to make a label that wraps several lines of text.
|
||||
|
||||
[!code-xaml[LabelSnippet#5](~/samples/snippets/csharp/VS_Snippets_Wpf/LabelSnippet/CS/Pane1.xaml#5)]
|
||||
|
||||
**Add an Access Key and Text Wrapping to Your Label**
|
||||
|
||||
If you need a <xref:System.Windows.Controls.Label> that has an access key (mnemonic), use the <xref:System.Windows.Controls.AccessText> element that is inside the <xref:System.Windows.Controls.Label>.
|
||||
|
||||
Controls such as <xref:System.Windows.Controls.Label>, <xref:System.Windows.Controls.Button>, <xref:System.Windows.Controls.RadioButton>, <xref:System.Windows.Controls.CheckBox>, <xref:System.Windows.Controls.MenuItem>, <xref:System.Windows.Controls.TabItem>, <xref:System.Windows.Controls.Expander>, and <xref:System.Windows.Controls.GroupBox> have default control templates. These templates contain a <xref:System.Windows.Controls.ContentPresenter>. One of the properties that you can set on the <xref:System.Windows.Controls.ContentPresenter> is <xref:System.Windows.Controls.ContentPresenter.RecognizesAccessKey%2A>="true", which you can use to specify an access key for the control.
|
||||
|
||||
The following example shows how to create a <xref:System.Windows.Controls.Label> that has an access key and supports text wrapping. To enable text wrapping, the example sets the <xref:System.Windows.Controls.AccessText.TextWrapping%2A> property and uses an underline character to specify the access key. (The character that immediately follows the underline character is the access key.)
|
||||
|
||||
[!code-xaml[LabelSnippet#4](~/samples/snippets/csharp/VS_Snippets_Wpf/LabelSnippet/CS/Pane1.xaml#4)]
|
||||
|
||||
## See also
|
||||
|
||||
- [How to: Set the Target Property of a Label](https://docs.microsoft.com/previous-versions/dotnet/netframework-3.5/ms752101(v=vs.90))
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: "How to: Create a Custom Panel Element"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
- "cpp"
|
||||
helpviewer_keywords:
|
||||
- "Panel control [WPF]"
|
||||
- "custom Panel elements [WPF]"
|
||||
ms.assetid: e0df4f1e-8c07-4e86-89a3-e22acfffdc2a
|
||||
---
|
||||
# How to: Create a Custom Panel Element
|
||||
## Example
|
||||
This example shows how to override the default layout behavior of the <xref:System.Windows.Controls.Panel> element and create custom layout elements that are derived from <xref:System.Windows.Controls.Panel>.
|
||||
|
||||
The example defines a simple custom <xref:System.Windows.Controls.Panel> element called `PlotPanel`, which positions child elements according to two hard-coded x- and y-coordinates. In this example, `x` and `y` are both set to `50`; therefore, all child elements are positioned at that location on the x and y axes.
|
||||
|
||||
To implement custom <xref:System.Windows.Controls.Panel> behaviors, the example uses the <xref:System.Windows.FrameworkElement.MeasureOverride%2A> and <xref:System.Windows.FrameworkElement.ArrangeOverride%2A> methods. Each method returns the <xref:System.Windows.Size> data that is necessary to position and render child elements.
|
||||
|
||||
[!code-cpp[PlotPanel#1](~/samples/snippets/cpp/VS_Snippets_Wpf/PlotPanel/CPP/PlotPanel.cpp#1)]
|
||||
[!code-csharp[PlotPanel#1](~/samples/snippets/csharp/VS_Snippets_Wpf/PlotPanel/CSharp/PlotPanel.cs#1)]
|
||||
[!code-vb[PlotPanel#1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/PlotPanel/VisualBasic/PlotPanel.vb#1)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.Panel>
|
||||
- [Panels Overview](panels-overview.md)
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
---
|
||||
title: "How to: Create a Custom View Mode for a ListView"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "ListView controls [WPF], creating custom View mode"
|
||||
ms.assetid: 71077349-eeb9-4344-ab29-b5df96df3314
|
||||
---
|
||||
# How to: Create a custom view mode for a ListView
|
||||
|
||||
This example shows how to create a custom <xref:System.Windows.Controls.ListView.View%2A> mode for a <xref:System.Windows.Controls.ListView> control.
|
||||
|
||||
## Example
|
||||
You must use the <xref:System.Windows.Controls.ViewBase> class when you create a custom view for the <xref:System.Windows.Controls.ListView> control. The following example shows a view mode called `PlainView` that's derived from the <xref:System.Windows.Controls.ViewBase> class.
|
||||
|
||||
[!code-csharp[ListViewCustomView#PlainView](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewCustomView/CSharp/PlainView.cs#plainview)]
|
||||
[!code-vb[ListViewCustomView#PlainView](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ListViewCustomView/visualbasic/plainview.vb#plainview)]
|
||||
|
||||
To apply a style to the custom view, use the <xref:System.Windows.Style> class. The following example defines a <xref:System.Windows.Style> for the `PlainView` view mode. In the previous example, this style is set as the value of the <xref:System.Windows.Controls.ViewBase.DefaultStyleKey%2A> property that's defined for `PlainView`.
|
||||
|
||||
[!code-xaml[ListViewCustomView#PlainViewStyle](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewCustomView/CSharp/Themes/Generic.xaml#plainviewstyle)]
|
||||
|
||||
To define the layout of data in a custom view mode, define a <xref:System.Windows.DataTemplate> object. The following example defines a <xref:System.Windows.DataTemplate> that can be used to display data in the `PlainView` view mode.
|
||||
|
||||
[!code-xaml[ListViewCustomView#PlainViewDataTemplate](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewCustomView/CSharp/Window1.xaml#plainviewdatatemplate)]
|
||||
|
||||
The following example shows how to define a <xref:System.Windows.ResourceKey> for the `PlainView` view mode that uses the <xref:System.Windows.DataTemplate> that is defined in the previous example.
|
||||
|
||||
[!code-xaml[ListViewCustomView#PlainViewtileView](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewCustomView/CSharp/Window1.xaml#plainviewtileview)]
|
||||
|
||||
A <xref:System.Windows.Controls.ListView> control can use a custom view if you set the <xref:System.Windows.Controls.ListView.View%2A> property to the resource key. The following example shows how to specify `PlainView` as the view mode for a <xref:System.Windows.Controls.ListView>.
|
||||
|
||||
[!code-csharp[ListViewCustomView#ListViewtileViewmode](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewCustomView/CSharp/Window1.xaml.cs#listviewtileviewmode)]
|
||||
[!code-vb[ListViewCustomView#ListViewtileViewmode](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ListViewCustomView/visualbasic/window1.xaml.vb#listviewtileviewmode)]
|
||||
|
||||
For the complete sample, see [ListView with Multiple Views (C#)](https://github.com/dotnet/docs/tree/master/samples/snippets/csharp/VS_Snippets_Wpf/ListViewCustomView/CSharp) or [ListView with Multiple Views (Visual Basic)](https://github.com/dotnet/docs/tree/master/samples/snippets/visualbasic/VS_Snippets_Wpf/ListViewCustomView/visualbasic).
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.ListView>
|
||||
- <xref:System.Windows.Controls.GridView>
|
||||
- [How-to Topics](listview-how-to-topics.md)
|
||||
- [ListView Overview](listview-overview.md)
|
||||
- [GridView Overview](gridview-overview.md)
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
title: "How to: Create a DockPanel"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], DockPanel"
|
||||
- "DockPanel control [WPF], creating"
|
||||
ms.assetid: 9194f663-e279-4f1a-86d7-125a57d05c6f
|
||||
---
|
||||
# How to: Create a DockPanel
|
||||
## Example
|
||||
The following example creates and uses an instance of <xref:System.Windows.Controls.DockPanel> by using code. The example shows you how to partition space by creating five <xref:System.Windows.Shapes.Rectangle> elements and positioning (docking) them inside a parent <xref:System.Windows.Controls.DockPanel>. If you retain the default setting, the final rectangle fills all the remaining unallocated space.
|
||||
|
||||
[!code-csharp[DockPanelCode#1](~/samples/snippets/csharp/VS_Snippets_Wpf/DockPanelCode/CSharp/DockPanel_Code.cs#1)]
|
||||
[!code-vb[DockPanelCode#1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/DockPanelCode/VisualBasic/dockpanel_vb.vb#1)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.DockPanel>
|
||||
- <xref:System.Windows.Controls.Dock>
|
||||
- [Panels Overview](panels-overview.md)
|
||||
@@ -0,0 +1,25 @@
|
||||
---
|
||||
title: "How to: Create a Grid Element"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "Grid control [WPF], creating [WPF], grid instance"
|
||||
ms.assetid: b2f07626-9df8-43b8-8d36-492f3cb42837
|
||||
---
|
||||
# How to: Create a Grid Element
|
||||
## Example
|
||||
The following example shows how to create and use an instance of <xref:System.Windows.Controls.Grid> by using either [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] or code. This example uses three <xref:System.Windows.Controls.ColumnDefinition> objects and three <xref:System.Windows.Controls.RowDefinition> objects to create a grid that has nine cells, such as in a worksheet. Each cell contains a <xref:System.Windows.Controls.TextBlock> element that represents data, and the top row contains a <xref:System.Windows.Controls.TextBlock> with the <xref:System.Windows.Controls.Grid.ColumnSpan%2A> property applied. To show the boundaries of each cell, the <xref:System.Windows.Controls.Grid.ShowGridLines%2A> property is enabled.
|
||||
|
||||
[!code-csharp[Grid#3](~/samples/snippets/csharp/VS_Snippets_Wpf/Grid/CSharp/Grid_Code.cs#3)]
|
||||
[!code-vb[Grid#3](~/samples/snippets/visualbasic/VS_Snippets_Wpf/Grid/VisualBasic/grid_vb.vb#3)]
|
||||
[!code-xaml[Grid#3](~/samples/snippets/xaml/VS_Snippets_Wpf/Grid/XAML/default.xaml#3)]
|
||||
|
||||
Either approach will generate a user interface that looks much the same, like the one below.
|
||||
|
||||

|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.Grid>
|
||||
- [Panels Overview](panels-overview.md)
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
---
|
||||
title: "How to: Create a Multiline TextBox Control"
|
||||
description: Learn how to use XAML to define a TextBox control that expands to accommodate multiple lines of text in a Windows Presentation Foundation application.
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "TextBox control [WPF], multiple lines of text"
|
||||
ms.assetid: 05914a93-d0ea-4a9a-b693-09df7d4e2ac2
|
||||
---
|
||||
# How to: Create a Multiline TextBox Control
|
||||
This example shows how to use [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] to define a <xref:System.Windows.Controls.TextBox> control that will automatically expand to accommodate multiple lines of text.
|
||||
|
||||
## Example
|
||||
Setting the <xref:System.Windows.Controls.TextBox.TextWrapping%2A> attribute to **Wrap** will cause entered text to wrap to a new line when the edge of the <xref:System.Windows.Controls.TextBox> control is reached, automatically expanding the <xref:System.Windows.Controls.TextBox> control to include room for a new line, if necessary.
|
||||
|
||||
Setting the <xref:System.Windows.Controls.Primitives.TextBoxBase.AcceptsReturn%2A> attribute to **true** causes a new line to be inserted when the RETURN key is pressed, once again automatically expanding the <xref:System.Windows.Controls.TextBox> to include room for a new line, if necessary.
|
||||
|
||||
The <xref:System.Windows.Controls.Primitives.TextBoxBase.VerticalScrollBarVisibility%2A> attribute adds a scroll bar to the <xref:System.Windows.Controls.TextBox>, so that the contents of the <xref:System.Windows.Controls.TextBox> can be scrolled through if the <xref:System.Windows.Controls.TextBox> expands beyond the size of the frame or window that encloses it.
|
||||
|
||||
[!code-xaml[TextBox_MiscCode#_MultilineTextBoxXAML](~/samples/snippets/csharp/VS_Snippets_Wpf/TextBox_MiscCode/CSharp/Window1.xaml#_multilinetextboxxaml)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.TextWrapping>
|
||||
- [TextBox Overview](textbox-overview.md)
|
||||
- [RichTextBox Overview](richtextbox-overview.md)
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "How to: Create a StackPanel"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "StackPanel control [WPF], creating"
|
||||
ms.assetid: e7ce65cb-720a-4bb6-95b6-286b74488a58
|
||||
---
|
||||
# How to: Create a StackPanel
|
||||
This example shows how to create a <xref:System.Windows.Controls.StackPanel>.
|
||||
|
||||
## Example
|
||||
A <xref:System.Windows.Controls.StackPanel> allows you to stack elements in a specified direction. By using properties that are defined on <xref:System.Windows.Controls.StackPanel>, content can flow both vertically, which is the default setting, or horizontally.
|
||||
|
||||
The following example vertically stacks five <xref:System.Windows.Controls.TextBlock> controls, each with a different <xref:System.Windows.Controls.Border> and <xref:System.Windows.Controls.Border.Background%2A>, by using <xref:System.Windows.Controls.StackPanel>. The child elements that have no specified <xref:System.Windows.FrameworkElement.Width%2A> stretch to fill the parent window; however, the child elements that have a specified <xref:System.Windows.FrameworkElement.Width%2A>, are centered within the window.
|
||||
|
||||
The default stack direction in a <xref:System.Windows.Controls.StackPanel> is vertical. To control content flow in a <xref:System.Windows.Controls.StackPanel>, use the <xref:System.Windows.Controls.StackPanel.Orientation%2A> property. You can control horizontal alignment by using the <xref:System.Windows.FrameworkElement.HorizontalAlignment%2A> property.
|
||||
|
||||
```xaml
|
||||
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="StackPanel Sample">
|
||||
<StackPanel>
|
||||
<Border Background="SkyBlue" BorderBrush="Black" BorderThickness="1">
|
||||
<TextBlock Foreground="Black" FontSize="12">Stacked Item #1</TextBlock>
|
||||
</Border>
|
||||
<Border Width="400" Background="CadetBlue" BorderBrush="Black" BorderThickness="1">
|
||||
<TextBlock Foreground="Black" FontSize="14">Stacked Item #2</TextBlock>
|
||||
</Border>
|
||||
<Border Background="LightGoldenRodYellow" BorderBrush="Black" BorderThickness="1">
|
||||
<TextBlock Foreground="Black" FontSize="16">Stacked Item #3</TextBlock>
|
||||
</Border>
|
||||
<Border Width="200" Background="PaleGreen" BorderBrush="Black" BorderThickness="1">
|
||||
<TextBlock Foreground="Black" FontSize="18">Stacked Item #4</TextBlock>
|
||||
</Border>
|
||||
<Border Background="White" BorderBrush="Black" BorderThickness="1">
|
||||
<TextBlock Foreground="Black" FontSize="20">Stacked Item #5</TextBlock>
|
||||
</Border>
|
||||
</StackPanel>
|
||||
</Page>
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.StackPanel>
|
||||
- [Panels Overview](panels-overview.md)
|
||||
- [How-to Topics](stackpanel-how-to-topics.md)
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
---
|
||||
title: "How to: Create a Style for a Dragged GridView Column Header"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "ListView controls [WPF], styling"
|
||||
ms.assetid: 0b999645-0313-4b33-80b9-19ece08b5459
|
||||
---
|
||||
# How to: Create a Style for a Dragged GridView Column Header
|
||||
This example shows how to change the appearance of a dragged <xref:System.Windows.Controls.GridViewColumnHeader> when the user changes the position of a column.
|
||||
|
||||
## Example
|
||||
When you drag a column header to another location in a <xref:System.Windows.Controls.ListView> that uses <xref:System.Windows.Controls.GridView> for its view mode, the column moves to the new position. While you are dragging the column header, a floating copy of the header appears in addition to the original header. A column header in a <xref:System.Windows.Controls.GridView> is represented by a <xref:System.Windows.Controls.GridViewColumnHeader> object.
|
||||
|
||||
To customize the appearance of both the floating and original headers, you can set <xref:System.Windows.Controls.ControlTemplate.Triggers%2A> to modify the <xref:System.Windows.Controls.GridViewColumnHeader> <xref:System.Windows.Style>. These <xref:System.Windows.Controls.ControlTemplate.Triggers%2A> are applied when the <xref:System.Windows.Controls.Primitives.ButtonBase.IsPressed%2A> property value is `true` and the <xref:System.Windows.Controls.GridViewColumnHeader.Role%2A> property value is <xref:System.Windows.Controls.GridViewColumnHeaderRole.Floating>.
|
||||
|
||||
When the user presses the mouse button and holds it down while the mouse pauses on the <xref:System.Windows.Controls.GridViewColumnHeader>, the <xref:System.Windows.Controls.Primitives.ButtonBase.IsPressed%2A> property value changes to `true`. Likewise, when the user begins the drag operation, the <xref:System.Windows.Controls.GridViewColumnHeader.Role%2A> property changes to <xref:System.Windows.Controls.GridViewColumnHeaderRole.Floating>.
|
||||
|
||||
The following example shows how to set <xref:System.Windows.Controls.ControlTemplate.Triggers%2A> to change the <xref:System.Windows.Controls.Control.Foreground%2A> and <xref:System.Windows.Controls.Control.Background%2A> colors of the original and floating headers when the user drags a column to a new position.
|
||||
|
||||
[!code-xaml[ListViewHeaderRoleStyle#GVCHControlTemplateStart](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewHeaderRoleStyle/CS/Window1.xaml#gvchcontroltemplatestart)]
|
||||
[!code-xaml[ListViewHeaderRoleStyle#ControlTemplateTriggersStart](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewHeaderRoleStyle/CS/Window1.xaml#controltemplatetriggersstart)]
|
||||
[!code-xaml[ListViewHeaderRoleStyle#IsPressed](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewHeaderRoleStyle/CS/Window1.xaml#ispressed)]
|
||||
[!code-xaml[ListViewHeaderRoleStyle#Floating](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewHeaderRoleStyle/CS/Window1.xaml#floating)]
|
||||
[!code-xaml[ListViewHeaderRoleStyle#ControlTemplateTriggersEnd](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewHeaderRoleStyle/CS/Window1.xaml#controltemplatetriggersend)]
|
||||
[!code-xaml[ListViewHeaderRoleStyle#GVCHControlTemplateEnd](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewHeaderRoleStyle/CS/Window1.xaml#gvchcontroltemplateend)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.GridViewColumnHeader>
|
||||
- <xref:System.Windows.Controls.GridViewColumnHeaderRole>
|
||||
- <xref:System.Windows.Controls.ListView>
|
||||
- <xref:System.Windows.Controls.GridView>
|
||||
- [How-to Topics](listview-how-to-topics.md)
|
||||
- [ListView Overview](listview-overview.md)
|
||||
- [GridView Overview](gridview-overview.md)
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "How to: Create an Expander with a ScrollViewer"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], Expander"
|
||||
- "ScrollViewer control [WPF], with Expander control"
|
||||
- "Expander control [WPF], creating"
|
||||
- "controls [WPF], ScrollViewer"
|
||||
ms.assetid: 2ad124d2-2406-4157-aaf2-64e067298f01
|
||||
---
|
||||
# How to: Create an Expander with a ScrollViewer
|
||||
This example shows how to create an <xref:System.Windows.Controls.Expander> control that contains complex content, such as an image and text. The example also encloses the content of the <xref:System.Windows.Controls.Expander> in a <xref:System.Windows.Controls.ScrollViewer> control.
|
||||
|
||||
## Example
|
||||
The following example shows how to create an <xref:System.Windows.Controls.Expander>. The example uses a <xref:System.Windows.Controls.Primitives.BulletDecorator> control, which contains an image and text, in order to define the <xref:System.Windows.Controls.HeaderedContentControl.Header%2A>. A <xref:System.Windows.Controls.ScrollViewer> control provides a method for scrolling the expanded content.
|
||||
|
||||
Note that the example sets the <xref:System.Windows.FrameworkElement.Height%2A> property on the <xref:System.Windows.Controls.ScrollViewer> instead of on the content. If the <xref:System.Windows.FrameworkElement.Height%2A> is set on the content, the <xref:System.Windows.Controls.ScrollViewer> does not allow the user to scroll the content. The <xref:System.Windows.FrameworkElement.Width%2A> property is set on the <xref:System.Windows.Controls.Expander> control and this setting applies to the <xref:System.Windows.Controls.HeaderedContentControl.Header%2A> and the expanded content.
|
||||
|
||||
[!code-xaml[ExpanderRichContent#CreateExpander](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpanderRichContent/CSharp/Window1.xaml#createexpander)]
|
||||
|
||||
[!code-csharp[ExpanderRichContent#CreateExpanderCode](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpanderRichContent/CSharp/Window1.xaml.cs#createexpandercode)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.Expander>
|
||||
- [Expander Overview](expander-overview.md)
|
||||
- [How-to Topics](expander-how-to-topics.md)
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: "How to: Create and Use a Canvas"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], Canvas"
|
||||
- "Canvas control [WPF], creating"
|
||||
- "Canvas control [WPF], using"
|
||||
ms.assetid: 420b9487-9a15-477c-9489-a22a4dec7779
|
||||
---
|
||||
# How to: Create and Use a Canvas
|
||||
This example shows how to create and use an instance of <xref:System.Windows.Controls.Canvas>.
|
||||
|
||||
## Example
|
||||
The following example explicitly positions two <xref:System.Windows.Controls.TextBlock> elements by using the <xref:System.Windows.Controls.Canvas.SetTop%2A> and <xref:System.Windows.Controls.Canvas.SetLeft%2A> methods of <xref:System.Windows.Controls.Canvas>. The example also assigns a <xref:System.Windows.Controls.Control.Background%2A> color of `LightSteelBlue` to the <xref:System.Windows.Controls.Canvas>.
|
||||
|
||||
> [!NOTE]
|
||||
> When you use [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] to position <xref:System.Windows.Controls.TextBlock> elements, use the <xref:System.Windows.Controls.Canvas.Top%2A> and <xref:System.Windows.Controls.Canvas.Left%2A> properties.
|
||||
|
||||
[!code-csharp[CanvasCode#1](~/samples/snippets/csharp/VS_Snippets_Wpf/CanvasCode/CSharp/Canvas_Code.cs#1)]
|
||||
[!code-vb[CanvasCode#1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/CanvasCode/VisualBasic/canvas_vb.vb#1)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.Canvas>
|
||||
- <xref:System.Windows.Controls.TextBlock>
|
||||
- <xref:System.Windows.Controls.Canvas.SetTop%2A>
|
||||
- <xref:System.Windows.Controls.Canvas.SetLeft%2A>
|
||||
- <xref:System.Windows.Controls.Canvas.Top%2A>
|
||||
- <xref:System.Windows.Controls.Canvas.Left%2A>
|
||||
- [Panels Overview](panels-overview.md)
|
||||
- [How-to Topics](canvas-how-to-topics.md)
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
---
|
||||
title: "How to: Create and Use a GridLengthConverter Object"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "Grid control [WPF], creating [WPF], GridLengthConverter objects"
|
||||
ms.assetid: 5ab75911-e36a-4825-80e4-081c57e8e182
|
||||
---
|
||||
# How to: Create and Use a GridLengthConverter Object
|
||||
## Example
|
||||
The following example shows how to create and use an instance of <xref:System.Windows.GridLengthConverter>. The example defines a custom method called `changeCol`, which passes the <xref:System.Windows.Controls.ListBoxItem> to a <xref:System.Windows.GridLengthConverter> that converts the <xref:System.Windows.Controls.ContentControl.Content%2A> of a <xref:System.Windows.Controls.ListBoxItem> to an instance of <xref:System.Windows.GridLength>. The converted value is then passed back as the value of the <xref:System.Windows.Controls.ColumnDefinition.Width%2A> property of the <xref:System.Windows.Controls.ColumnDefinition> element.
|
||||
|
||||
The example also defines a second custom method, called `changeColVal`. This custom method converts the <xref:System.Windows.Controls.Primitives.RangeBase.Value%2A> of a <xref:System.Windows.Controls.Slider> to a <xref:System.String> and then passes that value back to the <xref:System.Windows.Controls.ColumnDefinition> as the <xref:System.Windows.Controls.ColumnDefinition.Width%2A> of the element.
|
||||
|
||||
Note that a separate [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] file defines the contents of a <xref:System.Windows.Controls.ListBoxItem>.
|
||||
|
||||
[!code-csharp[gridlengthConverterGrid#1](~/samples/snippets/csharp/VS_Snippets_Wpf/gridlengthConverterGrid/CSharp/Window1.xaml.cs#1)]
|
||||
[!code-vb[gridlengthConverterGrid#1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/gridlengthConverterGrid/VisualBasic/Window1.xaml.vb#1)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.GridLengthConverter>
|
||||
- <xref:System.Windows.GridLength>
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: "How to: Create ListViewItems with a CheckBox"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], ListView"
|
||||
- "controls [WPF], CheckBox"
|
||||
- "ListView controls [WPF], CheckBox controls"
|
||||
- "CheckBox control [WPF], ListView control"
|
||||
ms.assetid: f6d66c7f-906c-4f65-a55a-0ede9d00e26a
|
||||
---
|
||||
# How to: Create ListViewItems with a CheckBox
|
||||
This example shows how to display a column of <xref:System.Windows.Controls.CheckBox> controls in a <xref:System.Windows.Controls.ListView> control that uses a <xref:System.Windows.Controls.GridView>.
|
||||
|
||||
## Example
|
||||
To create a column that contains <xref:System.Windows.Controls.CheckBox> controls in a <xref:System.Windows.Controls.ListView>, create a <xref:System.Windows.DataTemplate> that contains a <xref:System.Windows.Controls.CheckBox>. Then set the <xref:System.Windows.Controls.GridViewColumn.CellTemplate%2A> of a <xref:System.Windows.Controls.GridViewColumn> to the <xref:System.Windows.DataTemplate>.
|
||||
|
||||
The following example shows a <xref:System.Windows.DataTemplate> that contains a <xref:System.Windows.Controls.CheckBox>. The example binds the <xref:System.Windows.Controls.Primitives.ToggleButton.IsChecked%2A> property of the <xref:System.Windows.Controls.CheckBox> to the <xref:System.Windows.Controls.ListBoxItem.IsSelected%2A> property value of the <xref:System.Windows.Controls.ListViewItem> that contains it. Therefore, when the <xref:System.Windows.Controls.ListViewItem> that contains the <xref:System.Windows.Controls.CheckBox> is selected, the <xref:System.Windows.Controls.CheckBox> is checked.
|
||||
|
||||
[!code-xaml[ListViewChkBox#CheckBoxDataTemplate](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewChkBox/CS/window1.xaml#checkboxdatatemplate)]
|
||||
|
||||
The following example shows how to create a column of <xref:System.Windows.Controls.CheckBox> controls. To make the column, the example sets the <xref:System.Windows.Controls.GridViewColumn.CellTemplate%2A> property of the <xref:System.Windows.Controls.GridViewColumn> to the <xref:System.Windows.DataTemplate>.
|
||||
|
||||
[!code-xaml[ListViewChkBox#GridViewColumnCheckBox](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewChkBox/CS/window1.xaml#gridviewcolumncheckbox)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.Control>
|
||||
- <xref:System.Windows.Controls.ListView>
|
||||
- <xref:System.Windows.Controls.GridView>
|
||||
- [ListView Overview](listview-overview.md)
|
||||
- [How-to Topics](listview-how-to-topics.md)
|
||||
- [GridView Overview](gridview-overview.md)
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: "How to: Create Simple or Complex TreeViews"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "TreeView control [WPF], creating"
|
||||
- "Control class [WPF], TreeView [WPF], creating"
|
||||
ms.assetid: 1defbb78-b8e7-4c0e-b650-576453ac828d
|
||||
---
|
||||
# How to: Create Simple or Complex TreeViews
|
||||
This example shows how to create simple or complex <xref:System.Windows.Controls.TreeView> controls.
|
||||
|
||||
A <xref:System.Windows.Controls.TreeView> consists of a hierarchy of <xref:System.Windows.Controls.TreeViewItem> controls, which can contain simple text strings and also more complex content, such as <xref:System.Windows.Controls.Button> controls or a <xref:System.Windows.Controls.StackPanel> with embedded content. You can explicitly define the <xref:System.Windows.Controls.TreeView> content or a data source can provide the content. This topic provides examples of these concepts.
|
||||
|
||||
## Example
|
||||
The <xref:System.Windows.Controls.HeaderedItemsControl.Header%2A> property of the <xref:System.Windows.Controls.TreeViewItem> contains the content that the <xref:System.Windows.Controls.TreeView> displays for that item. A <xref:System.Windows.Controls.TreeViewItem> can also have <xref:System.Windows.Controls.TreeViewItem> controls as its child elements and you can define these child elements by using the <xref:System.Windows.Controls.ItemsControl.Items%2A> property.
|
||||
|
||||
The following example shows how to explicitly define <xref:System.Windows.Controls.TreeViewItem> content by setting the <xref:System.Windows.Controls.HeaderedItemsControl.Header%2A> property to a text string.
|
||||
|
||||
[!code-xaml[TreeViewSimple#1](~/samples/snippets/csharp/VS_Snippets_Wpf/TreeViewSimple/CS/Window1.xaml#1)]
|
||||
|
||||
The following example show how to define child elements of a <xref:System.Windows.Controls.TreeViewItem> by defining <xref:System.Windows.Controls.ItemsControl.Items%2A> that are <xref:System.Windows.Controls.Button> controls.
|
||||
|
||||
[!code-xaml[TreeViewSimple#3](~/samples/snippets/csharp/VS_Snippets_Wpf/TreeViewSimple/CS/Window1.xaml#3)]
|
||||
|
||||
The following example shows how to create a <xref:System.Windows.Controls.TreeView> where an <xref:System.Windows.Data.XmlDataProvider> provides <xref:System.Windows.Controls.TreeViewItem> content and a <xref:System.Windows.HierarchicalDataTemplate> defines the appearance of the content.
|
||||
|
||||
[!code-xaml[TreeViewSimple#6](~/samples/snippets/csharp/VS_Snippets_Wpf/TreeViewSimple/CS/Window1.xaml#6)]
|
||||
|
||||
[!code-xaml[TreeViewSimple#7](~/samples/snippets/csharp/VS_Snippets_Wpf/TreeViewSimple/CS/Window1.xaml#7)]
|
||||
|
||||
[!code-xaml[TreeViewSimple#5](~/samples/snippets/csharp/VS_Snippets_Wpf/TreeViewSimple/CS/Window1.xaml#5)]
|
||||
|
||||
The following example shows how to create a <xref:System.Windows.Controls.TreeView> where the <xref:System.Windows.Controls.TreeViewItem> content contains <xref:System.Windows.Controls.DockPanel> controls that have embedded content.
|
||||
|
||||
[!code-xaml[TreeViewSimple#9](~/samples/snippets/csharp/VS_Snippets_Wpf/TreeViewSimple/CS/Window1.xaml#9)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.TreeView>
|
||||
- <xref:System.Windows.Controls.TreeViewItem>
|
||||
- [TreeView Overview](treeview-overview.md)
|
||||
- [How-to Topics](treeview-how-to-topics.md)
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: "How to: Crop an Image"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "images [WPF], cropping"
|
||||
- "cropping images [WPF]"
|
||||
ms.assetid: c6bba109-c6e7-4cf8-bfe6-9cf8d01bb4fc
|
||||
---
|
||||
# How to: Crop an Image
|
||||
This example shows how to crop an image using <xref:System.Windows.Media.Imaging.CroppedBitmap>.
|
||||
|
||||
<xref:System.Windows.Media.Imaging.CroppedBitmap> is primarily used when encoding a cropped version of an image to save out to a file. To crop an image for display purposes see the [How to: Create a Clip Region](https://docs.microsoft.com/previous-versions/dotnet/netframework-3.5/ms746710(v=vs.90)) topic.
|
||||
|
||||
## Example
|
||||
The following [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] defines resources used within the samples below.
|
||||
|
||||
[!code-xaml[imageelementexample#CroppedXAML1](~/samples/snippets/csharp/VS_Snippets_Wpf/ImageElementExample/CSharp/CroppedImageExample.xaml#croppedxaml1)]
|
||||
|
||||
The following example creates an image using a <xref:System.Windows.Media.Imaging.CroppedBitmap> as its source.
|
||||
|
||||
[!code-xaml[imageelementexample#CroppedXAML2](~/samples/snippets/csharp/VS_Snippets_Wpf/ImageElementExample/CSharp/CroppedImageExample.xaml#croppedxaml2)]
|
||||
|
||||
[!code-csharp[imageelementexample#CroppedCSharp1](~/samples/snippets/csharp/VS_Snippets_Wpf/ImageElementExample/CSharp/CroppedImageExample.xaml.cs#croppedcsharp1)]
|
||||
[!code-vb[imageelementexample#CroppedCSharp1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ImageElementExample/VB/CroppedImageExample.xaml.vb#croppedcsharp1)]
|
||||
|
||||
The <xref:System.Windows.Media.Imaging.CroppedBitmap> can also be used as the source of another <xref:System.Windows.Media.Imaging.CroppedBitmap>, chaining the cropping. Note that the <xref:System.Windows.Media.Imaging.CroppedBitmap.SourceRect%2A> uses values that are relative to the source cropped bitmap and not the initial image.
|
||||
|
||||
[!code-xaml[imageelementexample#CroppedXAML3](~/samples/snippets/csharp/VS_Snippets_Wpf/ImageElementExample/CSharp/CroppedImageExample.xaml#croppedxaml3)]
|
||||
|
||||
[!code-csharp[imageelementexample#CroppedCSharp2](~/samples/snippets/csharp/VS_Snippets_Wpf/ImageElementExample/CSharp/CroppedImageExample.xaml.cs#croppedcsharp2)]
|
||||
[!code-vb[imageelementexample#CroppedCSharp2](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ImageElementExample/VB/CroppedImageExample.xaml.vb#croppedcsharp2)]
|
||||
|
||||
## See also
|
||||
|
||||
- [How to: Create a Clip Region](https://docs.microsoft.com/previous-versions/dotnet/netframework-3.5/ms746710(v=vs.90))
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
---
|
||||
title: "How to: Customize the Thumb Size on a ScrollBar"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "ScrollBar control [WPF]"
|
||||
- "customizing thumb size [WPF]"
|
||||
- "thumb size [WPF]"
|
||||
ms.assetid: fa32b866-5ca1-4e73-85e7-2ac64b80d194
|
||||
---
|
||||
# How to: Customize the Thumb Size on a ScrollBar
|
||||
This topic explains how to set the <xref:System.Windows.Controls.Primitives.Thumb> of a <xref:System.Windows.Controls.Primitives.ScrollBar> to a fixed size and how to specify a minimum size for the <xref:System.Windows.Controls.Primitives.Thumb> of a <xref:System.Windows.Controls.Primitives.ScrollBar>.
|
||||
|
||||
## Example
|
||||
|
||||
## Description
|
||||
The following example creates a <xref:System.Windows.Controls.Primitives.ScrollBar> that has a <xref:System.Windows.Controls.Primitives.Thumb> with a fixed size. The example sets the <xref:System.Windows.Controls.Primitives.Track.ViewportSize%2A> property of the <xref:System.Windows.Controls.Primitives.Thumb> to <xref:System.Double.NaN> and sets the height of the <xref:System.Windows.Controls.Primitives.Thumb>. To create a horizontal <xref:System.Windows.Controls.Primitives.ScrollBar> with a <xref:System.Windows.Controls.Primitives.Thumb> that has a fixed width, set the width of the <xref:System.Windows.Controls.Primitives.Thumb>.
|
||||
|
||||
## Code
|
||||
[!code-xaml[ScrollBarCustomThumbSize#1](~/samples/snippets/csharp/VS_Snippets_Wpf/ScrollBarCustomThumbSize/CS/Window1.xaml#1)]
|
||||
|
||||
## Description
|
||||
The following example creates a <xref:System.Windows.Controls.Primitives.ScrollBar> that has a <xref:System.Windows.Controls.Primitives.Thumb> with a minimum size. The example sets the value of <xref:System.Windows.SystemParameters.VerticalScrollBarButtonHeightKey%2A>. To create a horizontal <xref:System.Windows.Controls.Primitives.ScrollBar> with a <xref:System.Windows.Controls.Primitives.Thumb> that has a minimum width, set the <xref:System.Windows.SystemParameters.HorizontalScrollBarButtonWidthKey%2A>.
|
||||
|
||||
## Code
|
||||
[!code-xaml[ScrollBarCustomThumbSize#2](~/samples/snippets/csharp/VS_Snippets_Wpf/ScrollBarCustomThumbSize/CS/Window1.xaml#2)]
|
||||
|
||||
## See also
|
||||
|
||||
- [ScrollBar Styles and Templates](scrollbar-styles-and-templates.md)
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: "How to: Customize the Ticks on a Slider"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "TickBar [WPF]"
|
||||
- "Slider control [WPF], creating with TickBar"
|
||||
ms.assetid: 4fa694f2-a620-4b15-be78-5f4286f89361
|
||||
---
|
||||
# How to: Customize the Ticks on a Slider
|
||||
This example shows how to create a <xref:System.Windows.Controls.Slider> control that has tick marks.
|
||||
|
||||
## Example
|
||||
The <xref:System.Windows.Controls.Primitives.TickBar> displays when you set the <xref:System.Windows.Controls.Slider.TickPlacement%2A> property to a value other than <xref:System.Windows.Controls.Primitives.TickPlacement.None>, which is the default value.
|
||||
|
||||
The following example shows how to create a <xref:System.Windows.Controls.Slider> with a <xref:System.Windows.Controls.Primitives.TickBar> that displays tick marks. The <xref:System.Windows.Controls.Slider.TickPlacement%2A> and <xref:System.Windows.Controls.Slider.TickFrequency%2A> properties define the location of the tick marks and the interval between them. When you move the <xref:System.Windows.Controls.Primitives.Thumb>, tooltips display the value of the <xref:System.Windows.Controls.Slider>. The <xref:System.Windows.Controls.Slider.AutoToolTipPlacement%2A> property defines where the tooltips occur. The <xref:System.Windows.Controls.Primitives.Thumb> movements correspond to the location of the tick marks because <xref:System.Windows.Controls.Slider.IsSnapToTickEnabled%2A> is set to `true`.
|
||||
|
||||
The following example shows how to use the <xref:System.Windows.Controls.Slider.Ticks%2A> property to create tick marks along the <xref:System.Windows.Controls.Slider> at irregular intervals.
|
||||
|
||||
[!code-xaml[Slider#4](~/samples/snippets/xaml/VS_Snippets_Wpf/Slider/xaml/window1.xaml#4)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.Slider>
|
||||
- <xref:System.Windows.Controls.Primitives.TickBar>
|
||||
- <xref:System.Windows.Controls.Slider.TickPlacement%2A>
|
||||
- [How to: Bind a Slider to a Property Value](https://docs.microsoft.com/previous-versions/dotnet/netframework-3.5/ms788716(v=vs.90))
|
||||
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: "How to: Define a GroupBox Template"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "controls [WPF], GroupBox"
|
||||
- "GroupBox control [WPF], creating templates"
|
||||
ms.assetid: 85a4d1a7-4753-4f4a-b26d-14fa10c1ddb5
|
||||
---
|
||||
# How to: Define a GroupBox Template
|
||||
This example shows how to create a template for a <xref:System.Windows.Controls.GroupBox> control.
|
||||
|
||||
## Example
|
||||
The following example defines a <xref:System.Windows.Controls.GroupBox> control template by using a <xref:System.Windows.Controls.Grid> control for layout. The template uses a <xref:System.Windows.Controls.BorderGapMaskConverter> to define the border of the <xref:System.Windows.Controls.GroupBox> so that the border does not obscure the <xref:System.Windows.Controls.HeaderedContentControl.Header%2A> content.
|
||||
|
||||
[!code-xaml[GroupBoxSnippet#GroupBoxTemplate](~/samples/snippets/csharp/VS_Snippets_Wpf/GroupBoxSnippet/CS/Window1.xaml#groupboxtemplate)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.GroupBox>
|
||||
- [How to: Create a GroupBox](https://docs.microsoft.com/previous-versions/dotnet/netframework-3.5/ms748321(v=vs.90))
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title: "How to: Detect When Text in a TextBox Has Changed"
|
||||
description: Learn how to use the TextChanged event to run a method whenever the text in a TextBox control changes in a Windows Presentation Foundation application.
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "TextBox control [WPF], detecting text change"
|
||||
- "text change [WPF], detecting"
|
||||
- "detecting text change [WPF]"
|
||||
ms.assetid: 1c39ee14-e37f-49fb-a0d1-a9824ca13584
|
||||
---
|
||||
# How to: Detect When Text in a TextBox Has Changed
|
||||
|
||||
This example shows one way to use the <xref:System.Windows.Controls.Primitives.TextBoxBase.TextChanged> event to execute a method whenever the text in a <xref:System.Windows.Controls.TextBox> control has changed.
|
||||
|
||||
In the code-behind class for the [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] that contains the <xref:System.Windows.Controls.TextBox> control that you want to monitor for changes, insert a method to call whenever the <xref:System.Windows.Controls.Primitives.TextBoxBase.TextChanged> event fires. This method must have a signature that matches what is expected by the <xref:System.Windows.Controls.TextChangedEventHandler> delegate.
|
||||
|
||||
The event handler is called whenever the contents of the <xref:System.Windows.Controls.TextBox> control are changed, either by a user or programmatically.
|
||||
|
||||
> [!NOTE]
|
||||
> This event fires when the <xref:System.Windows.Controls.TextBox> control is created and initially populated with text.
|
||||
|
||||
## Example
|
||||
|
||||
In the [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] that defines your <xref:System.Windows.Controls.TextBox> control, specify the <xref:System.Windows.Controls.Primitives.TextBoxBase.TextChanged> attribute with a value that matches the event handler method name.
|
||||
|
||||
[!code-xaml[TextBox_MiscCode#_TextChangedXAML](~/samples/snippets/csharp/VS_Snippets_Wpf/TextBox_MiscCode/CSharp/Window1.xaml#_textchangedxaml)]
|
||||
|
||||
## Example
|
||||
|
||||
In the code-behind class for the [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] that contains the <xref:System.Windows.Controls.TextBox> control that you want to monitor for changes, insert a method to call whenever the <xref:System.Windows.Controls.Primitives.TextBoxBase.TextChanged> event fires. This method must have a signature that matches what is expected by the <xref:System.Windows.Controls.TextChangedEventHandler> delegate.
|
||||
|
||||
[!code-csharp[TextBox_MiscCode#_TextChangedEventHandler](~/samples/snippets/csharp/VS_Snippets_Wpf/TextBox_MiscCode/CSharp/Window1.xaml.cs#_textchangedeventhandler)]
|
||||
[!code-vb[TextBox_MiscCode#_TextChangedEventHandler](~/samples/snippets/visualbasic/VS_Snippets_Wpf/TextBox_MiscCode/VisualBasic/Window1.xaml.vb#_textchangedeventhandler)]
|
||||
|
||||
The event handler is called whenever the contents of the <xref:System.Windows.Controls.TextBox> control are changed, either by a user or programmatically.
|
||||
|
||||
> [!NOTE]
|
||||
> This event fires when the <xref:System.Windows.Controls.TextBox> control is created and initially populated with text.
|
||||
|
||||
Comments
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.TextChangedEventArgs>
|
||||
- [TextBox Overview](textbox-overview.md)
|
||||
- [RichTextBox Overview](richtextbox-overview.md)
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
---
|
||||
title: "How to: Display Data by Using GridViewRowPresenter"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "displaying data with GridViewRowPresenter [WPF]"
|
||||
- "GridViewRowPresenter [WPF]"
|
||||
ms.assetid: bdb785a5-a262-44d5-a517-ea14383e5f70
|
||||
---
|
||||
# How to: Display Data by Using GridViewRowPresenter
|
||||
This example shows how to use the <xref:System.Windows.Controls.GridViewRowPresenter> and <xref:System.Windows.Controls.GridViewHeaderRowPresenter> objects to display data in columns.
|
||||
|
||||
## Example
|
||||
The following example shows how to specify a <xref:System.Windows.Controls.GridViewColumnCollection> that displays the <xref:System.DateTime.DayOfWeek%2A> and <xref:System.DateTime.Year%2A> of a <xref:System.DateTime> object by using <xref:System.Windows.Controls.GridViewRowPresenter> and <xref:System.Windows.Controls.GridViewHeaderRowPresenter> objects. The example also defines a <xref:System.Windows.Style> for the <xref:System.Windows.Controls.GridViewColumn.Header%2A> of a <xref:System.Windows.Controls.GridViewColumn>.
|
||||
|
||||
[!code-xaml[GridViewRowPresenterSample#GridViewRowPresenter](~/samples/snippets/csharp/VS_Snippets_Wpf/GridViewRowPresenterSample/CS/Window1.xaml#gridviewrowpresenter)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.GridViewHeaderRowPresenter>
|
||||
- <xref:System.Windows.Controls.GridViewRowPresenter>
|
||||
- <xref:System.Windows.Controls.GridViewColumnCollection>
|
||||
- [GridView Overview](gridview-overview.md)
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "How to: Display ListView Contents by Using a GridView"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "ListView controls [WPF], displaying contents with GridView"
|
||||
- "GridView [WPF], displaying ListView contents"
|
||||
ms.assetid: 5bc1e767-ab46-4f14-bd41-3d5d39e1d000
|
||||
---
|
||||
# How to: Display ListView Contents by Using a GridView
|
||||
This example shows how to define a <xref:System.Windows.Controls.GridView> view mode for a <xref:System.Windows.Controls.ListView> control.
|
||||
|
||||
## Example
|
||||
You can define the view mode of a <xref:System.Windows.Controls.GridView> by specifying <xref:System.Windows.Controls.GridViewColumn> objects. The following example shows how to define <xref:System.Windows.Controls.GridViewColumn> objects that bind to the data content that is specified for the <xref:System.Windows.Controls.ListView> control. This <xref:System.Windows.Controls.GridView> example specifies three <xref:System.Windows.Controls.GridViewColumn> objects that map to the `FirstName`, `LastName`, and `EmployeeNumber` fields of the `EmployeeInfoDataSource` that is set as the <xref:System.Windows.Controls.ItemsControl.ItemsSource%2A> of the <xref:System.Windows.Controls.ListView> control.
|
||||
|
||||
[!code-xaml[ListViewCode#ListViewEmployee](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewCode/CSharp/Window1.xaml#listviewemployee)]
|
||||
|
||||
The following illustration shows how this example appears.
|
||||
|
||||

|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.ListView>
|
||||
- <xref:System.Windows.Controls.GridView>
|
||||
- [ListView Overview](listview-overview.md)
|
||||
- [GridView Overview](gridview-overview.md)
|
||||
- [How-to Topics](listview-how-to-topics.md)
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: "How to: Enable Spell Checking in a Text Editing Control"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "spellchecking [WPF]"
|
||||
- "real-time spellchecking"
|
||||
- "TextBox control [WPF], real-time spellchecking"
|
||||
- "spelling checker [WPF]"
|
||||
- "checking spelling [WPF]"
|
||||
ms.assetid: 6f953d2b-67e8-4012-84ce-53c0e958da47
|
||||
---
|
||||
# How to: Enable Spell Checking in a Text Editing Control
|
||||
The following example shows how to enable real-time spell checking in a <xref:System.Windows.Controls.TextBox> by using the <xref:System.Windows.Controls.SpellCheck.IsEnabled%2A> property of the <xref:System.Windows.Controls.SpellCheck> class.
|
||||
|
||||
## Example
|
||||
[!code-xaml[TextBoxMiscSnippets_snip#SpellCheckExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/TextBoxMiscSnippets_snip/csharp/spellcheckexample.xaml#spellcheckexamplewholepage)]
|
||||
|
||||
[!code-csharp[TextBoxMiscSnippets_procedural_snip#SpellCheckCodeExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/TextBoxMiscSnippets_procedural_snip/CSharp/SpellCheckExample.cs#spellcheckcodeexamplewholepage)]
|
||||
[!code-vb[TextBoxMiscSnippets_procedural_snip#SpellCheckCodeExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/TextBoxMiscSnippets_procedural_snip/visualbasic/spellcheckexample.vb#spellcheckcodeexamplewholepage)]
|
||||
|
||||
## See also
|
||||
|
||||
- [Use Spell Checking with a Context Menu](how-to-use-spell-checking-with-a-context-menu.md)
|
||||
- [TextBox Overview](textbox-overview.md)
|
||||
- [RichTextBox Overview](richtextbox-overview.md)
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: "How to: Enable Tab Characters in a TextBox Control"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "TextBox control [WPF], enabling tab characters"
|
||||
- "tab characters [WPF], enabling"
|
||||
ms.assetid: 14b1b064-61f7-4958-be63-88d85b868d03
|
||||
---
|
||||
# How to: Enable Tab Characters in a TextBox Control
|
||||
This example shows how to enable the acceptance of tab characters as normal input in a <xref:System.Windows.Controls.TextBox> control.
|
||||
|
||||
## Example
|
||||
To enable the acceptance of tab characters as input in a <xref:System.Windows.Controls.TextBox> control, set the <xref:System.Windows.Controls.Primitives.TextBoxBase.AcceptsTab%2A> attribute to **true**.
|
||||
|
||||
[!code-xaml[TextBox_EnablingTab#_AcceptsTab](~/samples/snippets/csharp/VS_Snippets_Wpf/TextBox_EnablingTab/CS/Window1.xaml#_acceptstab)]
|
||||
|
||||
## See also
|
||||
|
||||
- [TextBox Overview](textbox-overview.md)
|
||||
- [RichTextBox Overview](richtextbox-overview.md)
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
---
|
||||
title: "How to: Extract the Text Content from a RichTextBox"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "text content [WPF], extracting"
|
||||
- "RichTextBox control [WPF], extracting text content"
|
||||
- "content [WPF], extracting"
|
||||
- "extracting text content [WPF]"
|
||||
ms.assetid: f13c093f-1a05-45b3-ac8f-c9ea5e4a11c5
|
||||
---
|
||||
# How to: Extract the Text Content from a RichTextBox
|
||||
This example shows how to extract the contents of a <xref:System.Windows.Controls.RichTextBox> as plain text.
|
||||
|
||||
## Example
|
||||
The following [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] code describes a named <xref:System.Windows.Controls.RichTextBox> control with simple content.
|
||||
|
||||
[!code-xaml[RichTextBoxSnippets#_RTB_XAML](~/samples/snippets/csharp/VS_Snippets_Wpf/RichTextBoxSnippets/CSharp/Window1.xaml#_rtb_xaml)]
|
||||
|
||||
## Example
|
||||
The following code implements a method that takes a <xref:System.Windows.Controls.RichTextBox> as an argument, and returns a string representing the plain text contents of the <xref:System.Windows.Controls.RichTextBox>.
|
||||
|
||||
The method creates a new <xref:System.Windows.Documents.TextRange> from the contents of the <xref:System.Windows.Controls.RichTextBox>, using the <xref:System.Windows.Documents.FlowDocument.ContentStart%2A> and <xref:System.Windows.Documents.FlowDocument.ContentEnd%2A> to indicate the range of the contents to extract. <xref:System.Windows.Documents.FlowDocument.ContentStart%2A> and <xref:System.Windows.Documents.FlowDocument.ContentEnd%2A> properties each return a <xref:System.Windows.Documents.TextPointer>, and are accessible on the underlying FlowDocument that represents the contents of the <xref:System.Windows.Controls.RichTextBox>. <xref:System.Windows.Documents.TextRange> provides a Text property, which returns the plain text portions of the <xref:System.Windows.Documents.TextRange> as a string.
|
||||
|
||||
[!code-csharp[RichTextBoxSnippets#_RTB_StringFrom](~/samples/snippets/csharp/VS_Snippets_Wpf/RichTextBoxSnippets/CSharp/Window1.xaml.cs#_rtb_stringfrom)]
|
||||
[!code-vb[RichTextBoxSnippets#_RTB_StringFrom](~/samples/snippets/visualbasic/VS_Snippets_Wpf/RichTextBoxSnippets/visualbasic/window1.xaml.vb#_rtb_stringfrom)]
|
||||
|
||||
## See also
|
||||
|
||||
- [RichTextBox Overview](richtextbox-overview.md)
|
||||
- [TextBox Overview](textbox-overview.md)
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
---
|
||||
title: "How to: Find a TreeViewItem in a TreeView"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "TreeView control [WPF], finding a TreeViewItem"
|
||||
- "TreeViewItem [WPF], finding"
|
||||
ms.assetid: 72ecd40c-3939-4e01-b617-5e9daa6074d9
|
||||
---
|
||||
# How to: Find a TreeViewItem in a TreeView
|
||||
The <xref:System.Windows.Controls.TreeView> control provides a convenient way to display hierarchical data. If your <xref:System.Windows.Controls.TreeView> is bound to a data source, the <xref:System.Windows.Controls.TreeView.SelectedItem%2A> property provides a convenient way for you to quickly retrieve the selected data object. It is typically best to work with the underlying data object, but sometimes you may need to programmatically manipulate the data's containing <xref:System.Windows.Controls.TreeViewItem>. For example, you may need to programmatically expand the <xref:System.Windows.Controls.TreeViewItem>, or select a different item in the <xref:System.Windows.Controls.TreeView>.
|
||||
|
||||
To find a <xref:System.Windows.Controls.TreeViewItem> that contains a specific data object, you must traverse each level of the <xref:System.Windows.Controls.TreeView>. The items in a <xref:System.Windows.Controls.TreeView> can also be virtualized to improve performance. In the case where items might be virtualized, you also must realize a <xref:System.Windows.Controls.TreeViewItem> to check whether it contains the data object.
|
||||
|
||||
## Example
|
||||
|
||||
## Description
|
||||
The following example searches a <xref:System.Windows.Controls.TreeView> for a specific object and returns the object's containing <xref:System.Windows.Controls.TreeViewItem>. The example ensures that each <xref:System.Windows.Controls.TreeViewItem> is instantiated so that its child items can be searched. This example also works if the <xref:System.Windows.Controls.TreeView> does not use virtualized items.
|
||||
|
||||
> [!NOTE]
|
||||
> The following example works for any <xref:System.Windows.Controls.TreeView>, regardless of the underlying data model, and searches every <xref:System.Windows.Controls.TreeViewItem> until the object is found. Another technique that has better performance is to search the data model for the specified object, keep track of its location within the data hierarchy, and then find the corresponding <xref:System.Windows.Controls.TreeViewItem> in the <xref:System.Windows.Controls.TreeView>. However, the technique that has better performance requires knowledge of the data model and cannot be generalized for any given <xref:System.Windows.Controls.TreeView>.
|
||||
|
||||
## Code
|
||||
[!code-csharp[TreeViewFindTVI#1](~/samples/snippets/csharp/VS_Snippets_Wpf/TreeViewFindTVI/CSharp/MainWindow.xaml.cs#1)]
|
||||
[!code-vb[TreeViewFindTVI#1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/TreeViewFindTVI/VisualBasic/MainWindow.xaml.vb#1)]
|
||||
|
||||
The previous code relies on a custom <xref:System.Windows.Controls.VirtualizingStackPanel> that exposes a method named `BringIntoView`. The following code defines the custom <xref:System.Windows.Controls.VirtualizingStackPanel>.
|
||||
|
||||
[!code-csharp[TreeViewFindTVI#2](~/samples/snippets/csharp/VS_Snippets_Wpf/TreeViewFindTVI/CSharp/MainWindow.xaml.cs#2)]
|
||||
[!code-vb[TreeViewFindTVI#2](~/samples/snippets/visualbasic/VS_Snippets_Wpf/TreeViewFindTVI/VisualBasic/MainWindow.xaml.vb#2)]
|
||||
|
||||
The following XAML shows how to create a <xref:System.Windows.Controls.TreeView> that uses the custom <xref:System.Windows.Controls.VirtualizingStackPanel>.
|
||||
|
||||
[!code-xaml[TreeViewFindTVI#3](~/samples/snippets/csharp/VS_Snippets_Wpf/TreeViewFindTVI/CSharp/MainWindow.xaml#3)]
|
||||
|
||||
## See also
|
||||
|
||||
- [Improve the Performance of a TreeView](how-to-improve-the-performance-of-a-treeview.md)
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
---
|
||||
title: "How to: Find ControlTemplate-Generated Elements"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "ControlTemplates [WPF], finding elements"
|
||||
- "finding ControlTemplate elements [WPF]"
|
||||
ms.assetid: d7b25447-ceff-4bb4-9be5-fd7c40ef00af
|
||||
---
|
||||
# How to: Find ControlTemplate-Generated Elements
|
||||
This example shows how to find elements that are generated by a <xref:System.Windows.Controls.ControlTemplate>.
|
||||
|
||||
## Example
|
||||
The following example shows a style that creates a simple <xref:System.Windows.Controls.ControlTemplate> for the <xref:System.Windows.Controls.Button> class:
|
||||
|
||||
[!code-xaml[FindGeneratedItems#CT](~/samples/snippets/csharp/VS_Snippets_Wpf/FindGeneratedItems/CSharp/Window1.xaml#ct)]
|
||||
|
||||
To find an element within the template after the template has been applied, you can call the <xref:System.Windows.FrameworkTemplate.FindName%2A> method of the <xref:System.Windows.Controls.Control.Template%2A>. The following example creates a message box that shows the actual width value of the <xref:System.Windows.Controls.Grid> within the control template:
|
||||
|
||||
[!code-csharp[FindGeneratedItems#CTFindElement](~/samples/snippets/csharp/VS_Snippets_Wpf/FindGeneratedItems/CSharp/Window1.xaml.cs#ctfindelement)]
|
||||
[!code-vb[FindGeneratedItems#CTFindElement](~/samples/snippets/visualbasic/VS_Snippets_Wpf/FindGeneratedItems/VisualBasic/Window1.xaml.vb#ctfindelement)]
|
||||
|
||||
## See also
|
||||
|
||||
- [Find DataTemplate-Generated Elements](../data/how-to-find-datatemplate-generated-elements.md)
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
- [WPF XAML Namescopes](../advanced/wpf-xaml-namescopes.md)
|
||||
- [Trees in WPF](../advanced/trees-in-wpf.md)
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: "How to: Get a Collection of Lines from a TextBox"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "lines [WPF], getting collection of"
|
||||
- "TextBox control [WPF], getting collection of lines"
|
||||
ms.assetid: a12f529d-b926-47f6-92bf-cad5f17b532a
|
||||
---
|
||||
# How to: Get a Collection of Lines from a TextBox
|
||||
This example shows how to get a collection of lines of text from a <xref:System.Windows.Controls.TextBox>.
|
||||
|
||||
## Example
|
||||
The following example shows a simple method that takes a <xref:System.Windows.Controls.TextBox> as the argument, and returns a <xref:System.Collections.Specialized.StringCollection> containing the lines of text in the **TextBox**. The <xref:System.Windows.Controls.TextBox.LineCount%2A> property is used to determine how many lines are currently in the **TextBox**, and the <xref:System.Windows.Controls.TextBox.GetLineText%2A> method is then used to extract each line and add it to the collection of lines.
|
||||
|
||||
[!code-csharp[TextBox_MiscCode#_TextBox_GetLines](~/samples/snippets/csharp/VS_Snippets_Wpf/TextBox_MiscCode/CSharp/Window1.xaml.cs#_textbox_getlines)]
|
||||
|
||||
## See also
|
||||
|
||||
- [TextBox Overview](textbox-overview.md)
|
||||
- [RichTextBox Overview](richtextbox-overview.md)
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: "How to: Get a ListBoxItem"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "ListBox controls [WPF], getting a ListBoxItem"
|
||||
- "ListBoxItem [WPF]"
|
||||
ms.assetid: da877c6f-5fd8-40cb-8909-225cbfd99aa5
|
||||
---
|
||||
# How to: Get a ListBoxItem
|
||||
If you need to get a specific <xref:System.Windows.Controls.ListBoxItem> at a particular index in a <xref:System.Windows.Controls.ListBox>, you can use an <xref:System.Windows.Controls.ItemContainerGenerator>.
|
||||
|
||||
## Example
|
||||
The following example shows a <xref:System.Windows.Controls.ListBox> and its items.
|
||||
|
||||
[!code-xaml[ListBoxItems#1](~/samples/snippets/csharp/VS_Snippets_Wpf/ListBoxItems/CSharp/Window1.xaml#1)]
|
||||
|
||||
The following example shows how to retrieve the item by specifying the index of the item in the <xref:System.Windows.Controls.ItemContainerGenerator.ContainerFromIndex%2A> property of the <xref:System.Windows.Controls.ItemContainerGenerator>.
|
||||
|
||||
[!code-csharp[ListBoxItems#2](~/samples/snippets/csharp/VS_Snippets_Wpf/ListBoxItems/CSharp/Window1.xaml.cs#2)]
|
||||
[!code-vb[ListBoxItems#2](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ListBoxItems/VisualBasic/Window1.xaml.vb#2)]
|
||||
|
||||
After you have retrieved the list box item, you can display the contents of the item, as shown in the following example.
|
||||
|
||||
[!code-csharp[ListBoxItems#3](~/samples/snippets/csharp/VS_Snippets_Wpf/ListBoxItems/CSharp/Window1.xaml.cs#3)]
|
||||
[!code-vb[ListBoxItems#3](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ListBoxItems/VisualBasic/Window1.xaml.vb#3)]
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: "How to: Get or Set a Dock Value"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "Dock values [WPF], setting"
|
||||
- "Dock values [WPF], getting"
|
||||
ms.assetid: fcf4ab8a-c7cd-4835-8d04-de1c999ab4a8
|
||||
---
|
||||
# How to: Get or Set a Dock Value
|
||||
The following example shows how to assign a <xref:System.Windows.Controls.Dock> value for an object. The example uses the <xref:System.Windows.Controls.DockPanel.GetDock%2A> and <xref:System.Windows.Controls.DockPanel.SetDock%2A> methods of <xref:System.Windows.Controls.DockPanel>.
|
||||
|
||||
## Example
|
||||
The example creates an instance of the <xref:System.Windows.Controls.TextBlock> element, `txt1`, and assigns a <xref:System.Windows.Controls.Dock> value of `Top` by using the <xref:System.Windows.Controls.DockPanel.SetDock%2A> method of <xref:System.Windows.Controls.DockPanel>. It then appends the value of the <xref:System.Windows.Controls.Dock> property to the <xref:System.Windows.Controls.TextBlock.Text%2A> of the <xref:System.Windows.Controls.TextBlock> element by using the <xref:System.Windows.Controls.DockPanel.GetDock%2A> method. Finally, the example adds the <xref:System.Windows.Controls.TextBlock> element to the parent <xref:System.Windows.Controls.DockPanel>, `dp1`.
|
||||
|
||||
[!code-csharp[DockPanelSetDock#1](~/samples/snippets/csharp/VS_Snippets_Wpf/DockPanelSetDock/CSharp/DockPanel_SetDock.cs#1)]
|
||||
[!code-vb[DockPanelSetDock#1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/DockPanelSetDock/VisualBasic/DockPanel_SetDock.vb#1)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.DockPanel>
|
||||
- <xref:System.Windows.Controls.DockPanel.GetDock%2A>
|
||||
- <xref:System.Windows.Controls.DockPanel.SetDock%2A>
|
||||
- [Panels Overview](panels-overview.md)
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
---
|
||||
title: "How to: Get or Set Canvas Positioning Properties"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "Canvas control [WPF], setting positioning properties"
|
||||
ms.assetid: 1636b950-2b5a-4507-8a10-c5034cc58b1c
|
||||
---
|
||||
# How to: Get or Set Canvas Positioning Properties
|
||||
This example shows how to use the positioning methods of the <xref:System.Windows.Controls.Canvas> element to position child content. This example uses content in a <xref:System.Windows.Controls.ListBoxItem> to represent positioning values and converts the values into instances of <xref:System.Double>, which is a required argument for positioning. The values are then converted back into strings and displayed as text in a <xref:System.Windows.Controls.TextBlock> element by using the <xref:System.Windows.Controls.Canvas.GetLeft%2A> method.
|
||||
|
||||
## Example
|
||||
The following example creates a <xref:System.Windows.Controls.ListBox> element that has eleven selectable <xref:System.Windows.Controls.ListBoxItem> elements. The <xref:System.Windows.Controls.Primitives.Selector.SelectionChanged> event triggers the `ChangeLeft` custom method, which the subsequent code block defines.
|
||||
|
||||
Each <xref:System.Windows.Controls.ListBoxItem> represents a <xref:System.Double> value, which is one of the arguments that the <xref:System.Windows.Controls.Canvas.SetLeft%2A> method of <xref:System.Windows.Controls.Canvas> accepts. In order to use a <xref:System.Windows.Controls.ListBoxItem> to represent an instance of <xref:System.Double>, you must first convert the <xref:System.Windows.Controls.ListBoxItem> to the correct data type.
|
||||
|
||||
[!code-xaml[CanvasPositioningProperties#1](~/samples/snippets/csharp/VS_Snippets_Wpf/CanvasPositioningProperties/CSharp/Window1.xaml#1)]
|
||||
|
||||
When a user changes the <xref:System.Windows.Controls.ListBox> selection, it invokes the `ChangeLeft` custom method. This method passes the <xref:System.Windows.Controls.ListBoxItem> to a <xref:System.Windows.LengthConverter> object, which converts the <xref:System.Windows.Controls.ContentControl.Content%2A> of a <xref:System.Windows.Controls.ListBoxItem> to an instance of <xref:System.Double> (notice that this value has already been converted to a <xref:System.String> by using the <xref:System.Windows.Controls.Control.ToString%2A> method). This value is then passed back to the <xref:System.Windows.Controls.Canvas.SetLeft%2A> and <xref:System.Windows.Controls.Canvas.GetLeft%2A> methods of <xref:System.Windows.Controls.Canvas> in order to change the position of the `text1` object.
|
||||
|
||||
[!code-csharp[CanvasPositioningProperties#2](~/samples/snippets/csharp/VS_Snippets_Wpf/CanvasPositioningProperties/CSharp/Window1.xaml.cs#2)]
|
||||
[!code-vb[CanvasPositioningProperties#2](~/samples/snippets/visualbasic/VS_Snippets_Wpf/CanvasPositioningProperties/VisualBasic/Window1.xaml.vb#2)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.Canvas>
|
||||
- <xref:System.Windows.Controls.ListBoxItem>
|
||||
- <xref:System.Windows.LengthConverter>
|
||||
- [Panels Overview](panels-overview.md)
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
---
|
||||
title: "How to: Group Items in a ListView That Implements a GridView"
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "ListView controls [WPF], grouping items with GridViews"
|
||||
- "grouping items in ListViews implementing GridViews [WPF]"
|
||||
- "GridView controls [WPF], grouping items"
|
||||
ms.assetid: eebef25b-ddc6-424e-a66d-ea228d1bf33d
|
||||
---
|
||||
# How to: Group Items in a ListView That Implements a GridView
|
||||
This example shows how to display groups of items in the <xref:System.Windows.Controls.GridView> view mode of a <xref:System.Windows.Controls.ListView> control.
|
||||
|
||||
## Example
|
||||
To display groups of items in a <xref:System.Windows.Controls.ListView>, define a <xref:System.Windows.Data.CollectionViewSource>. The following example shows a <xref:System.Windows.Data.CollectionViewSource> that groups data items according to the value of the `Catalog` data field.
|
||||
|
||||
[!code-xaml[GridViewWithGroups#GroupingCollectionViewSource](~/samples/snippets/csharp/VS_Snippets_Wpf/GridViewWithGroups/CS/Window1.xaml#groupingcollectionviewsource)]
|
||||
|
||||
The following example sets the <xref:System.Windows.Controls.ItemsControl.ItemsSource%2A> for the <xref:System.Windows.Controls.ListView> to the <xref:System.Windows.Data.CollectionViewSource> that the previous example defines. The example also defines a <xref:System.Windows.Controls.ItemsControl.GroupStyle%2A> that implements an <xref:System.Windows.Controls.Expander> control.
|
||||
|
||||
[!code-xaml[GridViewWithGroups#ListViewGroups](~/samples/snippets/csharp/VS_Snippets_Wpf/GridViewWithGroups/CS/Window1.xaml#listviewgroups)]
|
||||
[!code-xaml[GridViewWithGroups#ListViewEnd](~/samples/snippets/csharp/VS_Snippets_Wpf/GridViewWithGroups/CS/Window1.xaml#listviewend)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.ListView>
|
||||
- <xref:System.Windows.Controls.GridView>
|
||||
- [How-to Topics](listview-how-to-topics.md)
|
||||
- [ListView Overview](listview-overview.md)
|
||||
- [GridView Overview](gridview-overview.md)
|
||||
+149
@@ -0,0 +1,149 @@
|
||||
---
|
||||
title: "How to: Group, sort, and filter Data in the DataGrid control"
|
||||
description: Learn how to bind a Windows Presentation Foundation DataGrid control to a CollectionView that supports grouping, sorting, and filtering data in views.
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "DataGrid [WPF], sort"
|
||||
- "DataGrid [WPF], group"
|
||||
- "DataGrid [WPF], filter"
|
||||
ms.assetid: 03345e85-89e3-4aec-9ed0-3b80759df770
|
||||
---
|
||||
# How to: Group, sort, and filter data in the DataGrid control
|
||||
|
||||
It is often useful to view data in a <xref:System.Windows.Controls.DataGrid> in different ways by grouping, sorting, and filtering the data. To group, sort, and filter the data in a <xref:System.Windows.Controls.DataGrid>, you bind it to a <xref:System.Windows.Data.CollectionView> that supports these functions. You can then work with the data in the <xref:System.Windows.Data.CollectionView> without affecting the underlying source data. The changes in the collection view are reflected in the <xref:System.Windows.Controls.DataGrid> user interface (UI).
|
||||
|
||||
The <xref:System.Windows.Data.CollectionView> class provides grouping and sorting functionality for a data source that implements the <xref:System.Collections.IEnumerable> interface. The <xref:System.Windows.Data.CollectionViewSource> class enables you to set the properties of a <xref:System.Windows.Data.CollectionView> from XAML.
|
||||
|
||||
In this example, a collection of `Task` objects is bound to a <xref:System.Windows.Data.CollectionViewSource>. The <xref:System.Windows.Data.CollectionViewSource> is used as the <xref:System.Windows.Controls.ItemsControl.ItemsSource%2A> for the <xref:System.Windows.Controls.DataGrid>. Grouping, sorting, and filtering are performed on the <xref:System.Windows.Data.CollectionViewSource> and are displayed in the <xref:System.Windows.Controls.DataGrid> UI.
|
||||
|
||||

|
||||
Grouped data in a DataGrid
|
||||
|
||||
## Using a CollectionViewSource as an ItemsSource
|
||||
|
||||
To group, sort, and filter data in a <xref:System.Windows.Controls.DataGrid> control, you bind the <xref:System.Windows.Controls.DataGrid> to a <xref:System.Windows.Data.CollectionView> that supports these functions. In this example, the <xref:System.Windows.Controls.DataGrid> is bound to a <xref:System.Windows.Data.CollectionViewSource> that provides these functions for a <xref:System.Collections.Generic.List%601> of `Task` objects.
|
||||
|
||||
### To bind a DataGrid to a CollectionViewSource
|
||||
|
||||
1. Create a data collection that implements the <xref:System.Collections.IEnumerable> interface.
|
||||
|
||||
If you use <xref:System.Collections.Generic.List%601> to create your collection, you should create a new class that inherits from <xref:System.Collections.Generic.List%601> instead of instantiating an instance of <xref:System.Collections.Generic.List%601>. This enables you to data bind to the collection in XAML.
|
||||
|
||||
> [!NOTE]
|
||||
> The objects in the collection must implement the <xref:System.ComponentModel.INotifyPropertyChanged> changed interface and the <xref:System.ComponentModel.IEditableObject> interface in order for the <xref:System.Windows.Controls.DataGrid> to respond correctly to property changes and edits. For more information, see [Implement Property Change Notification](../data/how-to-implement-property-change-notification.md).
|
||||
|
||||
[!code-csharp[DataGrid_GroupSortFilter#101](~/samples/snippets/csharp/VS_Snippets_Wpf/DataGrid_GroupSortFilter/CS/MainWindow.xaml.cs#101)]
|
||||
[!code-vb[DataGrid_GroupSortFilter#101](~/samples/snippets/visualbasic/VS_Snippets_Wpf/DataGrid_GroupSortFilter/VB/MainWindow.xaml.vb#101)]
|
||||
|
||||
2. In XAML, create an instance of the collection class and set the [x:Key Directive](/dotnet/desktop-wpf/xaml-services/xkey-directive).
|
||||
|
||||
3. In XAML, create an instance of the <xref:System.Windows.Data.CollectionViewSource> class, set the [x:Key Directive](/dotnet/desktop-wpf/xaml-services/xkey-directive), and set the instance of your collection class as the <xref:System.Windows.Data.CollectionViewSource.Source%2A>.
|
||||
|
||||
[!code-xaml[DataGrid_GroupSortFilter#201](~/samples/snippets/csharp/VS_Snippets_Wpf/DataGrid_GroupSortFilter/CS/WindowSnips1.xaml#201)]
|
||||
|
||||
4. Create an instance of the <xref:System.Windows.Controls.DataGrid> class, and set the <xref:System.Windows.Controls.ItemsControl.ItemsSource%2A> property to the <xref:System.Windows.Data.CollectionViewSource>.
|
||||
|
||||
[!code-xaml[DataGrid_GroupSortFilter#002](~/samples/snippets/csharp/VS_Snippets_Wpf/DataGrid_GroupSortFilter/CS/MainWindow.xaml#002)]
|
||||
|
||||
5. To access the <xref:System.Windows.Data.CollectionViewSource> from your code, use the <xref:System.Windows.Data.CollectionViewSource.GetDefaultView%2A> method to get a reference to the <xref:System.Windows.Data.CollectionViewSource>.
|
||||
|
||||
[!code-csharp[DataGrid_GroupSortFilter#102](~/samples/snippets/csharp/VS_Snippets_Wpf/DataGrid_GroupSortFilter/CS/MainWindow.xaml.cs#102)]
|
||||
[!code-vb[DataGrid_GroupSortFilter#102](~/samples/snippets/visualbasic/VS_Snippets_Wpf/DataGrid_GroupSortFilter/VB/MainWindow.xaml.vb#102)]
|
||||
|
||||
## Grouping items in a DataGrid
|
||||
|
||||
To specify how items are grouped in a <xref:System.Windows.Controls.DataGrid>, you use the <xref:System.Windows.Data.PropertyGroupDescription> type to group the items in the source view.
|
||||
|
||||
### To group items in a DataGrid using XAML
|
||||
|
||||
1. Create a <xref:System.Windows.Data.PropertyGroupDescription> that specifies the property to group by. You can specify the property in XAML or in code.
|
||||
|
||||
1. In XAML, set the <xref:System.Windows.Data.PropertyGroupDescription.PropertyName%2A> to the name of the property to group by.
|
||||
|
||||
2. In code, pass the name of the property to group by to the constructor.
|
||||
|
||||
2. Add the <xref:System.Windows.Data.PropertyGroupDescription> to the <xref:System.Windows.Data.CollectionViewSource.GroupDescriptions%2A?displayProperty=nameWithType> collection.
|
||||
|
||||
3. Add additional instances of <xref:System.Windows.Data.PropertyGroupDescription> to the <xref:System.Windows.Data.CollectionViewSource.GroupDescriptions%2A> collection to add more levels of grouping.
|
||||
|
||||
[!code-xaml[DataGrid_GroupSortFilter#012](~/samples/snippets/csharp/VS_Snippets_Wpf/DataGrid_GroupSortFilter/CS/MainWindow.xaml#012)]
|
||||
[!code-csharp[DataGrid_GroupSortFilter#112](~/samples/snippets/csharp/VS_Snippets_Wpf/DataGrid_GroupSortFilter/CS/MainWindow.xaml.cs#112)]
|
||||
[!code-vb[DataGrid_GroupSortFilter#112](~/samples/snippets/visualbasic/VS_Snippets_Wpf/DataGrid_GroupSortFilter/VB/MainWindow.xaml.vb#112)]
|
||||
|
||||
4. To remove a group, remove the <xref:System.Windows.Data.PropertyGroupDescription> from the <xref:System.Windows.Data.CollectionViewSource.GroupDescriptions%2A> collection.
|
||||
|
||||
5. To remove all groups, call the <xref:System.Collections.ObjectModel.Collection%601.Clear%2A> method of the <xref:System.Windows.Data.CollectionViewSource.GroupDescriptions%2A> collection.
|
||||
|
||||
[!code-csharp[DataGrid_GroupSortFilter#114](~/samples/snippets/csharp/VS_Snippets_Wpf/DataGrid_GroupSortFilter/CS/MainWindow.xaml.cs#114)]
|
||||
[!code-vb[DataGrid_GroupSortFilter#114](~/samples/snippets/visualbasic/VS_Snippets_Wpf/DataGrid_GroupSortFilter/VB/MainWindow.xaml.vb#114)]
|
||||
|
||||
When items are grouped in the <xref:System.Windows.Controls.DataGrid>, you can define a <xref:System.Windows.Controls.GroupStyle> that specifies the appearance of each group. You apply the <xref:System.Windows.Controls.GroupStyle> by adding it to the <xref:System.Windows.Controls.ItemsControl.GroupStyle%2A> collection of the DataGrid. If you have multiple levels of grouping, you can apply different styles to each group level. Styles are applied in the order in which they are defined. For example, if you define two styles, the first will be applied to top level row groups. The second style will be applied to all row groups at the second level and lower. The <xref:System.Windows.FrameworkElement.DataContext%2A> of the <xref:System.Windows.Controls.GroupStyle> is the <xref:System.Windows.Data.CollectionViewGroup> that the group represents.
|
||||
|
||||
### To change the appearance of row group headers
|
||||
|
||||
1. Create a <xref:System.Windows.Controls.GroupStyle> that defines the appearance of the row group.
|
||||
|
||||
2. Put the <xref:System.Windows.Controls.GroupStyle> inside the `<DataGrid.GroupStyle>` tags.
|
||||
|
||||
[!code-xaml[DataGrid_GroupSortFilter#003](~/samples/snippets/csharp/VS_Snippets_Wpf/DataGrid_GroupSortFilter/CS/MainWindow.xaml#003)]
|
||||
|
||||
## Sorting items in a DataGrid
|
||||
|
||||
To specify how items are sorted in a <xref:System.Windows.Controls.DataGrid>, you use the <xref:System.ComponentModel.SortDescription> type to sort the items in the source view.
|
||||
|
||||
### To sort items in a DataGrid
|
||||
|
||||
1. Create a <xref:System.ComponentModel.SortDescription> that specifies the property to sort by. You can specify the property in XAML or in code.
|
||||
|
||||
1. In XAML, set the <xref:System.ComponentModel.SortDescription.PropertyName%2A> to the name of the property to sort by.
|
||||
|
||||
2. In code, pass the name of the property to sort by and the <xref:System.ComponentModel.ListSortDirection> to the constructor.
|
||||
|
||||
2. Add the <xref:System.ComponentModel.SortDescription> to the <xref:System.Windows.Data.CollectionViewSource.SortDescriptions%2A?displayProperty=nameWithType> collection.
|
||||
|
||||
3. Add additional instances of <xref:System.ComponentModel.SortDescription> to the <xref:System.Windows.Data.CollectionViewSource.SortDescriptions%2A> collection to sort by additional properties.
|
||||
|
||||
[!code-xaml[DataGrid_GroupSortFilter#011](~/samples/snippets/csharp/VS_Snippets_Wpf/DataGrid_GroupSortFilter/CS/MainWindow.xaml#011)]
|
||||
[!code-csharp[DataGrid_GroupSortFilter#211](~/samples/snippets/csharp/VS_Snippets_Wpf/DataGrid_GroupSortFilter/CS/WindowSnips1.xaml.cs#211)]
|
||||
[!code-vb[DataGrid_GroupSortFilter#211](~/samples/snippets/visualbasic/VS_Snippets_Wpf/DataGrid_GroupSortFilter/VB/MainWindow.xaml.vb#211)]
|
||||
|
||||
## Filtering items in a DataGrid
|
||||
|
||||
To filter items in a <xref:System.Windows.Controls.DataGrid> using a <xref:System.Windows.Data.CollectionViewSource>, you provide the filtering logic in the handler for the <xref:System.Windows.Data.CollectionViewSource.Filter?displayProperty=nameWithType> event.
|
||||
|
||||
### To filter items in a DataGrid
|
||||
|
||||
1. Add a handler for the <xref:System.Windows.Data.CollectionViewSource.Filter?displayProperty=nameWithType> event.
|
||||
|
||||
2. In the <xref:System.Windows.Data.CollectionViewSource.Filter> event handler, define the filtering logic.
|
||||
|
||||
The filter will be applied every time the view is refreshed.
|
||||
|
||||
[!code-xaml[DataGrid_GroupSortFilter#013](~/samples/snippets/csharp/VS_Snippets_Wpf/DataGrid_GroupSortFilter/CS/MainWindow.xaml#013)]
|
||||
[!code-csharp[DataGrid_GroupSortFilter#113](~/samples/snippets/csharp/VS_Snippets_Wpf/DataGrid_GroupSortFilter/CS/MainWindow.xaml.cs#113)]
|
||||
[!code-vb[DataGrid_GroupSortFilter#113](~/samples/snippets/visualbasic/VS_Snippets_Wpf/DataGrid_GroupSortFilter/VB/MainWindow.xaml.vb#113)]
|
||||
|
||||
Alternatively, you can filter items in a <xref:System.Windows.Controls.DataGrid> by creating a method that provides the filtering logic and setting the <xref:System.Windows.Data.CollectionView.Filter%2A?displayProperty=nameWithType> property to apply the filter. To see an example of this method, see [Filter Data in a View](../data/how-to-filter-data-in-a-view.md).
|
||||
|
||||
## Example
|
||||
|
||||
The following example demonstrates grouping, sorting, and filtering `Task` data in a <xref:System.Windows.Data.CollectionViewSource> and displaying the grouped, sorted, and filtered `Task` data in a <xref:System.Windows.Controls.DataGrid>. The <xref:System.Windows.Data.CollectionViewSource> is used as the <xref:System.Windows.Controls.ItemsControl.ItemsSource%2A> for the <xref:System.Windows.Controls.DataGrid>. Grouping, sorting, and filtering are performed on the <xref:System.Windows.Data.CollectionViewSource> and are displayed in the <xref:System.Windows.Controls.DataGrid> UI.
|
||||
|
||||
To test this example, you will need to adjust the DGGroupSortFilterExample name to match your project name. If you are using Visual Basic, you will need to change the class name for <xref:System.Windows.Window> to the following.
|
||||
|
||||
`<Window x:Class="MainWindow"`
|
||||
|
||||
[!code-xaml[DataGrid_GroupSortFilter#000](~/samples/snippets/csharp/VS_Snippets_Wpf/DataGrid_GroupSortFilter/CS/MainWindow.xaml#000)]
|
||||
[!code-csharp[DataGrid_GroupSortFilter#100](~/samples/snippets/csharp/VS_Snippets_Wpf/DataGrid_GroupSortFilter/CS/MainWindow.xaml.cs#100)]
|
||||
[!code-vb[DataGrid_GroupSortFilter#100](~/samples/snippets/visualbasic/VS_Snippets_Wpf/DataGrid_GroupSortFilter/VB/MainWindow.xaml.vb#100)]
|
||||
|
||||
## See also
|
||||
|
||||
- [Data Binding Overview](/dotnet/desktop-wpf/data/data-binding-overview)
|
||||
- [Create and Bind to an ObservableCollection](../data/how-to-create-and-bind-to-an-observablecollection.md)
|
||||
- [Filter Data in a View](../data/how-to-filter-data-in-a-view.md)
|
||||
- [Sort Data in a View](../data/how-to-sort-data-in-a-view.md)
|
||||
- [Sort and Group Data Using a View in XAML](../data/how-to-sort-and-group-data-using-a-view-in-xaml.md)
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
---
|
||||
title: "How to: Handle the MouseDoubleClick Event for Each Item in a ListView"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "ListView controls [WPF], MouseDoubleClick event"
|
||||
ms.assetid: 81b39369-655a-4585-ac58-4640e5bb8fed
|
||||
---
|
||||
# How to: Handle the MouseDoubleClick Event for Each Item in a ListView
|
||||
To handle an event for an item in a <xref:System.Windows.Controls.ListView>, you need to add an event handler to each <xref:System.Windows.Controls.ListViewItem>. When a <xref:System.Windows.Controls.ListView> is bound to a data source, you don't explicitly create a <xref:System.Windows.Controls.ListViewItem>, but you can handle the event for each item by adding an <xref:System.Windows.EventSetter> to a style of a <xref:System.Windows.Controls.ListViewItem>.
|
||||
|
||||
## Example
|
||||
The following example creates a data-bound <xref:System.Windows.Controls.ListView> and creates a <xref:System.Windows.Style> to add an event handler to each <xref:System.Windows.Controls.ListViewItem>.
|
||||
|
||||
[!code-xaml[ListViewHowTos#1](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewHowTos/CSharp/Window1.xaml#1)]
|
||||
[!code-xaml[ListViewHowTos#5](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewHowTos/CSharp/Window1.xaml#5)]
|
||||
[!code-xaml[ListViewHowTos#2](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewHowTos/CSharp/Window1.xaml#2)]
|
||||
|
||||
The following example handles the <xref:System.Windows.Controls.Control.MouseDoubleClick> event.
|
||||
|
||||
[!code-csharp[ListViewHowTos#6](~/samples/snippets/csharp/VS_Snippets_Wpf/ListViewHowTos/CSharp/Window1.xaml.cs#6)]
|
||||
[!code-vb[ListViewHowTos#6](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ListViewHowTos/VisualBasic/Window1.xaml.vb#6)]
|
||||
|
||||
> [!NOTE]
|
||||
> Although it is most common to bind a <xref:System.Windows.Controls.ListView> to a data source, you can use a style to add an event handler to each <xref:System.Windows.Controls.ListViewItem> in a non-data-bound <xref:System.Windows.Controls.ListView> regardless of whether you explicitly create a <xref:System.Windows.Controls.ListViewItem>. For more information about explicitly and implicitly created <xref:System.Windows.Controls.ListViewItem> controls, see <xref:System.Windows.Controls.ItemsControl>.
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Xml.XmlElement>
|
||||
- [Data Binding Overview](/dotnet/desktop-wpf/data/data-binding-overview)
|
||||
- [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview)
|
||||
- [Bind to XML Data Using an XMLDataProvider and XPath Queries](../data/how-to-bind-to-xml-data-using-an-xmldataprovider-and-xpath-queries.md)
|
||||
- [ListView Overview](listview-overview.md)
|
||||
@@ -0,0 +1,29 @@
|
||||
---
|
||||
title: "How to: Handle the ScrollChanged Event"
|
||||
ms.date: "03/30/2017"
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "ScrollViewer control [WPF], raising ScrollChanged events"
|
||||
- "ScrollChanged events [WPF]"
|
||||
ms.assetid: 42c695d8-ee28-49d4-80fd-fc71e9be7f29
|
||||
---
|
||||
# How to: Handle the ScrollChanged Event
|
||||
## Example
|
||||
This example shows how to handle the <xref:System.Windows.Controls.ScrollViewer.ScrollChanged> event of a <xref:System.Windows.Controls.ScrollViewer>.
|
||||
|
||||
A <xref:System.Windows.Documents.FlowDocument> element with <xref:System.Windows.Documents.Paragraph> parts is defined in [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)]. When the <xref:System.Windows.Controls.ScrollViewer.ScrollChanged> event occurs due to user interaction, a handler is invoked, and text is written to a <xref:System.Windows.Controls.TextBlock> indicating that the event has occurred.
|
||||
|
||||
[!code-xaml[scrollchangedeventargsLayout#1](~/samples/snippets/csharp/VS_Snippets_Wpf/scrollchangedeventargsLayout/CSharp/Window1.xaml#1)]
|
||||
[!code-xaml[scrollchangedeventargsLayout#2](~/samples/snippets/csharp/VS_Snippets_Wpf/scrollchangedeventargsLayout/CSharp/Window1.xaml#2)]
|
||||
|
||||
[!code-csharp[scrollchangedeventargsLayout#3](~/samples/snippets/csharp/VS_Snippets_Wpf/scrollchangedeventargsLayout/CSharp/Window1.xaml.cs#3)]
|
||||
[!code-vb[scrollchangedeventargsLayout#3](~/samples/snippets/visualbasic/VS_Snippets_Wpf/scrollchangedeventargsLayout/VisualBasic/Window1.xaml.vb#3)]
|
||||
|
||||
## See also
|
||||
|
||||
- <xref:System.Windows.Controls.ScrollViewer>
|
||||
- <xref:System.Windows.Controls.ScrollViewer.ScrollChanged>
|
||||
- <xref:System.Windows.Controls.ScrollChangedEventHandler>
|
||||
- <xref:System.Windows.Controls.ScrollChangedEventArgs>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user