Appearance

The Stretch property specifies how the keyboard fills the available space in its parent element. The default value is Uniform, specifying that the keyboard's content stretches uniformly to fill either the width or height of parent, depending on current aspect ratio.

Appearance of keyboard keys can be customized using Xaml data templates. The following code from Styles sample project defines a DataTemplate for each Key -derived class:

Xaml

<DataTemplate DataType="{x:Type vk:RegularKey}">
        <ContentControl  HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
            <StackPanel IsHitTestVisible="False" Visibility="Visible" x:Name="sp" >
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <TextBlock Text="{Binding UpperCase}"/>
                    <TextBlock Text="{Binding AlterCase}" Foreground="Black" Margin="5 0 0 0"/>
                </StackPanel>
                <TextBlock Text="{Binding LowerCase}" HorizontalAlignment="Right" Foreground="Black"/>
            </StackPanel>
        </ContentControl>
    </DataTemplate>    <DataTemplate DataType="{x:Type vk:SpecialKey}">
        <ContentControl x:Name="btn" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Foreground="Black" BorderBrush="Red" BorderThickness="2">
            <Grid x:Name="grid_Brnd">
                <TextBlock Text="{Binding Content}" TextWrapping="Wrap" Foreground="{Binding Foreground,ElementName=btn}"/>
            </Grid>
        </ContentControl>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding IsLocked}" Value="True">
                <Setter Property="BorderBrush"  Value="Black" TargetName="btn"/>
                <Setter Property="Foreground"  Value="White" TargetName="btn"/>
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>    <DataTemplate DataType="{x:Type vk:NumPadKey}">
        <ContentControl x:Name="btn">
            <StackPanel HorizontalAlignment="Left">
                <TextBlock Text="{Binding NumCase}" Foreground="Red" HorizontalAlignment="Left"/>
                <TextBlock Text="{Binding Content}" TextWrapping="Wrap"  HorizontalAlignment="Left"/>
            </StackPanel>
        </ContentControl>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding IsLocked}" Value="True">
                <Setter Property="BorderBrush"  Value="Red" TargetName="btn"/>
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>    <DataTemplate DataType="{x:Type vk:ExtendedKey}">
        <ContentControl>
            <TextBlock Text="{Binding Content}"/>
        </ContentControl>
    </DataTemplate>

The standard VirtualKeyboard and key class templates bind to brushes with following identifiers as dynamic resources. You could define them in your own resource dictionary, or use one of the pre-defined themes from MindFusion.Themes.Wpf.dll:

• IC_Background is assigned to the Background property of the VirtualKeyboard control.
• IC_Foreground is assigned to the Foreground property of the VirtualKeyboard control.
• IC_ButtonBackground is assigned to Fill property of keys in normal state.
• IC_ButtonPressedBackground is assigned to Fill property of keys in pressed state.