InkToolbar.InitialControls Property

public:
 property InkToolbarInitialControls InitialControls { InkToolbarInitialControls get(); void set(InkToolbarInitialControls value); };

InkToolbarInitialControls InitialControls();

void InitialControls(InkToolbarInitialControls value);

public InkToolbarInitialControls InitialControls { get; set; }

var inkToolbarInitialControls = inkToolbar.initialControls;
inkToolbar.initialControls = inkToolbarInitialControls;

Public Property InitialControls As InkToolbarInitialControls

Property Value

The collection of built-in buttons to add to the InkToolbar.

Examples

To specify which built-in buttons are displayed at initialization:

1. Set InitialControls to None.
2. Add the individual buttons.
3. Specify the InkToolbar UI experience, such as the default button. The following examples (both XAML and code-behind) show how to clear the default buttons from the InkToolber, add ballpoint pen, pencil, and eraser buttons, and set the default button to pencil.

XAML

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="*"/>
 </Grid.RowDefinitions>
 <StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
 <TextBlock x:Name="Header" 
 Text="Basic ink sample" 
 Style="{ThemeResource HeaderTextBlockStyle}" 
 Margin="10,0,0,0" />
 </StackPanel>
 <Grid Grid.Row="1">
 <Image Source="Assets\StoreLogo.png" />
 <!-- Clear the default InkToolbar buttons by setting InitialControls to None. -->
 <!-- Set the active tool to the pencil button. -->
 <InkCanvas x:Name="inkCanvas" />
 <InkToolbar x:Name="inkToolbar" 
 VerticalAlignment="Top" 
 TargetInkCanvas="{x:Bind inkCanvas}" 
 InitialControls="None"
 ActiveTool="{x:Bind pencilButton}">
 <!-- 
 Add only the ballpoint pen, pencil, and eraser. 
 Note that the buttons are added to the toolbar in the order 
 defined by the framework, not the order we specify here.
 -->
 <InkToolbarEraserButton />
 <InkToolbarBallpointPenButton />
 <InkToolbarPencilButton x:Name="pencilButton"/>
 </InkToolbar>
 </Grid>
</Grid>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="*"/>
 </Grid.RowDefinitions>
 <StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
 <TextBlock x:Name="Header" 
 Text="Basic ink sample" 
 Style="{ThemeResource HeaderTextBlockStyle}" 
 Margin="10,0,0,0" />
 </StackPanel>
 <Grid Grid.Row="1">
 <Image Source="Assets\StoreLogo.png" />
 <InkCanvas x:Name="inkCanvas" />
 <InkToolbar x:Name="inkToolbar" VerticalAlignment="Top" TargetInkCanvas="{x:Bind inkCanvas}" />
 </Grid>
</Grid>

/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// Here, we set up InkToolbar event listeners.
/// </summary>
public MainPage_CodeBehind()
{
 this.InitializeComponent();
 // Add handlers for InkToolbar events.
 inkToolbar.Loading += inkToolbar_Loading;
 //inkToolbar.Loaded += inkToolbar_Loaded;
}

/// <summary>
/// Handles the Loading event of the InkToolbar. 
/// Here, we identify the buttons to include on the InkToolbar.
/// </summary>
/// <param name="sender">The InkToolbar</param>
/// <param name="args">The InkToolbar event data. 
/// If there is no event data, this parameter is null</param>
private void inkToolbar_Loading(FrameworkElement sender, object args)
{
 // Clear all built-in buttons from the InkToolbar.
 inkToolbar.InitialControls = InkToolbarInitialControls.None;

 // Add only the ballpoint pen, pencil, and eraser.
 // Note that the buttons are added to the toolbar in the order
 // defined by the framework, not the order we specify here.
 InkToolbarBallpointPenButton ballpoint = new InkToolbarBallpointPenButton();
 InkToolbarPencilButton pencil = new InkToolbarPencilButton();
 InkToolbarEraserButton eraser = new InkToolbarEraserButton();
 inkToolbar.Children.Add(eraser);
 inkToolbar.Children.Add(ballpoint);
 inkToolbar.Children.Add(pencil);
}

/// <summary>
/// Handle the Loaded event of the InkToolbar.
/// By default, the active tool is set to the first tool on the toolbar.
/// Here, we set the active tool to the pencil button. 
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void inkToolbar_Loaded(object sender, RoutedEventArgs e)
{
 InkToolbarToolButton pencilButton = inkToolbar.GetToolButton(InkToolbarTool.Pencil);
 inkToolbar.ActiveTool = pencilButton;
}

Remarks

Default built-in buttons, or those specified through InitialControls, are not added to the Children property.

Built-in or custom buttons added programmatically or declared in XAML, are added to the Children property.

Built-in buttons are displayed in a pre-determined order within their respective control groups. Custom buttons are added to the appropriate control group in the order specified, after all built-in buttons.

See also

• Pen and stylus interactions
• Add an InkToolbar to a Universal Windows Platform (UWP) app
• Get Started Tutorial: Support ink in your UWP app
• InitialControlsProperty
• Simple ink sample (C#/C++)
• Complex ink sample (C++)
• Ink sample (JavaScript)
• Get Started Tutorial: Support ink in your UWP app
• Coloring book sample