29.2 Der XAML-Code
Zuerst wollen wir die Oberfläche des benutzerdefinierten Steuerelements bereitstellen. Dazu wählen wir ein Grid als Layout-Container, in dem die drei Slider-Elemente positioniert werden. Die Fläche, innerhalb deren die Hintergrundfarbe die Eigenschaft Color des Steuerelements widerspiegelt, wird durch ein Rectangle-Element beschrieben.
Da wir uns zur Vorgabe gemacht haben, die drei Eigenschaften Red, Green und Blue mit dem Steuerelement zu veröffentlichen, werden die Value-Eigenschaften der Slider an die entsprechenden Eigenschaften gebunden. Die Eigenschaft Fill des Rectangle-Elements hingegen binden wir an die Eigenschaft Color.
Den kompletten XAML-Code können Sie dem folgenden Listing entnehmen.
<UserControl x:Class="ColorMixerApp.ColorMixer"
d:DesignHeight="100" d:DesignWidth="200"
Name="colorMixer">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Slider Name="sliderRed" Minimum="0" Maximum="255"
Margin="{Binding ElementName=colorMixer,Path=Padding}"
Value="{Binding ElementName=colorMixer,Path=Red}"></Slider>
<Slider Grid.Row="1" Name="sliderGreen" Minimum="0" Maximum="255"
Margin="{Binding ElementName=colorMixer,Path=Padding}"
Value="{Binding ElementName=colorMixer,Path=Green}"></Slider>
<Slider Grid.Row="2" Name="sliderBlue" Minimum="0" Maximum="255"
Margin="{Binding ElementName=colorMixer,Path=Padding}"
Value="{Binding ElementName=colorMixer,Path=Blue}"></Slider>
<Rectangle Grid.Column="1" Grid.RowSpan="3"
Margin="{Binding ElementName=colorMixer,Path=Padding}"
Width="50" Stroke="Black" StrokeThickness="1">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding ElementName=colorMixer,Path=Color}"/>
</Rectangle.Fill>
</Rectangle>
</Grid>
</UserControl>
Listing 29.2 XAML-Code des Steuerelements »ColorMixer«
Ihre Meinung
Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.