A partial control hierarchy for the ContentControl defined in Windows.UI.Xaml.Controls:
Object └─DependencyObject └─UIElement └─FrameworkElement └─Control └─ContentControl ├─ButtonBase │ ├─Button │ ├─HyperlinkButton │ ├─RepeatButton │ └─ToggleButton │ ├─CheckBox │ └─RadioButton ├─SelectorItem (non-instantiable) │ ├─ComboBoxItem │ ├─FlipViewItem │ ├─GridViewItem │ ├─ListBoxItem │ └─ListViewItem ├─ScrollViewer ├─AppBar │ └─CommandBar └─SettingsFlyout
The ContentControl exhibits the following behaviour:
<Grid> <!-- nothing is rendered --> <ContentControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <Rectangle Fill="Green" /> </ContentControl> </Grid>
<Grid> <!-- a green rectangle is rendered --> <ContentControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" <Rectangle Fill="Green" /> </ContentControl> </Grid>
The ContentControl can be used to set some visual aspects of a child control such as FontSize:
<ContentControl FontSize="25"> <!-- StackPanel does not have the FontSize property --> <StackPanel> <TextBlock Text="Test1" /> <TextBlock Text="Test2" /> <TextBlock Text="Test3" /> </StackPanel> </ContentControl>
The ContentControl can serve as a ContentPresenter in a control template:
<Button Content="Test" Background="Bisque"> <Button.Template> <ControlTemplate TargetType="Button"> <Border Width="200" Height="100" CornerRadius="20" Background="{TemplateBinding Background}"> <ContentControl Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Border> </ControlTemplate> </Button.Template> </Button>
The ContentControl provides the ContentTemplate property to provide a template for its content:
<Page ...> <Page.Resources> <DataTemplate x:Key="CustomerTemplate"> ... </DataTemplate> </Page.Resources> <Grid> <ContentControl Content="{Binding Customer}" ContentTemplate="{StaticResource CustomerTemplate}" /> </Grid> </Page>
The following two code snippets are equivalent:
<!-- Snippet #1 --> <Page ...> <Grid ...> <TextBlock ... /> <TextBlock ... /> <TextBlock ... /> </Grid> </Page> <!-- Snippet #2 --> <Page ...> <Page.Content> <Grid ...> <Grid.Children> <TextBlock ... /> <TextBlock ... /> <TextBlock ... /> </Grid.Children> </Grid> </Page.Content> </Page>
The reason we can omit the content properties Page.Content and Grid.Children in the snippet #1 is that all classes referenced in XAML are allowed to have one content property. For this property, property tags are not required.
The content property is specified using the ContentPropertyAttribute located in the Windows.UI.Xaml.Markup namespace:
[ContentProperty(Name="Children")] public class Panel : FrameworkElement { ... } [ContentProperty(Name="Content")] public class UserControl : Control { ... }
In the following code snippet we can omit not only the content property LinearGradientBrush.GradientStops but also the collection object GradientStopCollection:
<TextBlock> <TextBlock.Foreground ...> <LinearGradientBrush ...> <LinearGradientBrush.GradientStops> <GradientStopCollection> <GradientStop ...> <GradientStop ...> </GradientStopCollection> </LinearGradientBrush.GradientStops> </LinearGradientBrush ...> </TextBlock.Foreground ...> </TextBlock>
The ScrollViewer properties:
Grid vs. ScrollViewer:
The properties of the ScrollViewer relevant for zooming:
Snap-points can be set to aid users in getting to key locations in the content. There are two different types of snap-points:
Some of the ScrollViewer properties can be accessed as attached properties:
Example: A StackPanel wrapped in a ScrollViewer:
<ScrollViewer HorizontalAlignment="Center"> <StackPanel> <Rectangle Fill="Blue" Width="180" Height="180" Margin="8" /> <Rectangle Fill="Green" Width="180" Height="180" Margin="8" /> <Rectangle Fill="Yellow" Width="180" Height="180" Margin="8" /> <Rectangle Fill="Red" Width="180" Height="180" Margin="8" /> <Rectangle Fill="Magenta" Width="180" Height="180" Margin="8" /> </StackPanel> </ScrollViewer>
The following ScrollViewer won't have the ability to scroll because the parent StackPanel reserves infinite space for its children:
<StackPanel> <ScrollViewer> ... </ScrollViewer> </StackPanel>
Some item controls such as ListView have an internal ScrollViewer. Use attached properties to modify the internal ScrollViewer:
<ListView ScrollViewer.VerticalScrollBarVisibility="Auto"> ... </ListView>