I want to switch between several user controls, i.e. UserControl1, UserControl2, UserControl3, using several buttons where each button is associated with one particular UserControl. I want to do this in XAML, without using the CodeBehind file.
I've built a very primitive UserControl containing simple Sliders, RadioButtons, and CheckBoxes. I named it UserControl1, deleted the corresponding CodeBehind file, and removed the x:Class property. Now, I'd like to integrate UserControl1 to my MainUserControl. When I do this using Blend, I don't get an error; however, there is an exclamation mark in the preview. When I try to re-build the code in Blend, I get a warning saying that I should re-build the code again, and again and again. Does anyone see what I am doing wrong here?
My MainUserControl looks like this:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestApp;assembly=TestApp"
mc:Ignorable="d"
x:Name="UserControl"
xmlns:cntrl="clr-namespace:TestApp"
d:DesignWidth="640" d:DesignHeight="480">
<UserControl.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="Cntrl1">
<BeginStoryboard Storyboard="{StaticResource ActivateCntrl1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="Cntrl2">
<BeginStoryboard Storyboard="{StaticResource ActivateCntrl2}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="Cntrl3">
<BeginStoryboard Storyboard="{StaticResource ActivateCntrl3}"/>
</EventTrigger>
</UserControl.Triggers>
<Viewbox>
<Grid x:Name="LayoutRoot" Height="540" Width="1440">
<Grid.Background>
<LinearGradientBrush EndPoint="0.916,0.431" StartPoint="0.022,0.879">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Ellipse HorizontalAlignment="Left" Height="80" Margin="46.5,223.5,0,0" Stroke="Black" VerticalAlignment="Top" Width="80" StrokeThickness="0" Opacity="0.7">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF3250DC" Offset="0"/>
<GradientStop Color="#FF14143C" Offset="0.905"/>
<GradientStop Color="#FF282864" Offset="0.672"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Button Content="Button" HorizontalAlignment="Left" Margin="46,13.5,0,0" VerticalAlignment="Top" Width="75"/>
<Grid HorizontalAlignment="Left" Height="482.5" Margin="756,28.5,0,0" VerticalAlignment="Top" Width="640">
<StackPanel x:Name="Cntrl1Badge" Margin="0,0,0,0" Orientation="Vertical" RenderTransformOrigin="0.5,0.5">
<StackPanel.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</StackPanel.RenderTransform>
<Border x:Name="Cntrl1Border" Width="640" Height="482.5" BorderThickness="2">
<Border.BorderBrush>
<SolidColorBrush Color="#7F666666" Opacity="1"/>
</Border.BorderBrush>
<Border.Background>
<RadialGradientBrush Opacity="1">
<GradientStop Color="#CCBEBEBE" Offset="0"/>
<GradientStop Color="#E53C3096" Offset="1"/>
</RadialGradientBrush>
</Border.Background>
<cntrl:UserControl1/>
</Border>
</StackPanel>
<StackPanel x:Name="Cntrl2Badge" Margin="0,0,0,0" Orientation="Vertical" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Right" Width="640">
<StackPanel.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</StackPanel.RenderTransform>
<Border x:Name="Cntrl2Border" Width="640" Height="482.5" BorderThickness="2">
<Border.BorderBrush>
<SolidColorBrush Color="#7F666666" Opacity="1"/>
</Border.BorderBrush>
<Border.Background>
<RadialGradientBrush Opacity="1">
<GradientStop Color="#CCBEBEBE" Offset="0"/>
<GradientStop Color="#E53C3096" Offset="1"/>
</RadialGradientBrush>
</Border.Background>
<cntrl:UserControl2/>
</Border>
</StackPanel>
<StackPanel x:Name="Cntrl3Badge" Margin="0,0,0,0" Orientation="Vertical" RenderTransformOrigin="0.5,0.5">
<StackPanel.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</StackPanel.RenderTransform>
<Border x:Name="Cntrl3Border" Width="640" Height="482.5" BorderThickness="2" Margin="5,0">
<Border.BorderBrush>
<SolidColorBrush Color="#7F666666" Opacity="1"/>
</Border.BorderBrush>
<Border.Background>
<RadialGradientBrush Opacity="1">
<GradientStop Color="#CCBEBEBE" Offset="0"/>
<GradientStop Color="#E53C3096" Offset="1"/>
</RadialGradientBrush>
</Border.Background>
<cntrl:UserControl3/>
</Border>
</StackPanel>
</Grid>
<StackPanel HorizontalAlignment="Left" Height="441.25" Margin="262.5,89.25,0,0" VerticalAlignment="Top" Width="397">
<ToggleButton x:Name="Cntrl1" Style="{StaticResource MenuButtonStyle}" Content="ALEX" Height="81.96"/>
<ToggleButton x:Name="Cntrl2" Style="{StaticResource MenuButtonStyle}" Content="SEVGI" Height="81.96"/>
<ToggleButton x:Name="Cntrl3" Style="{StaticResource MenuButtonStyle}" Content="MICHL" Height="81.96"/>
</StackPanel>
</Grid>
</Viewbox>
</UserControl>
And UserControl1 looks like this:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Name="UserControl"
d:DesignWidth="640" d:DesignHeight="482.5">
<Grid x:Name="LayoutRoot">
<Slider HorizontalAlignment="Left" Margin="47.5,16,0,0" VerticalAlignment="Top" Width="534" Height="27.956"/>
<Slider HorizontalAlignment="Left" Margin="47.5,78.266,0,0" VerticalAlignment="Top" Width="534" Height="27.957"/>
<Slider HorizontalAlignment="Left" Margin="47.5,145.616,0,0" VerticalAlignment="Top" Width="534" Height="27.956"/>
<Slider HorizontalAlignment="Left" Margin="47.5,211.694,0,0" VerticalAlignment="Top" Width="534" Height="27.957"/>
<Slider HorizontalAlignment="Left" Margin="47.5,275.231,0,0" VerticalAlignment="Top" Width="534" Height="27.957"/>
<RadioButton Content="RadioButton" HorizontalAlignment="Left" Margin="76.144,362.913,0,0" VerticalAlignment="Top" Height="20.281" Width="167.586"/>
<CheckBox Content="CheckBox" HorizontalAlignment="Left" Margin="80.236,423.908,0,0" VerticalAlignment="Top" Height="20.281" Width="139.985"/>
<RadioButton Content="RadioButton" HorizontalAlignment="Left" Margin="358.489,364.183,0,0" VerticalAlignment="Top" Height="20.281" Width="167.585"/>
<CheckBox Content="CheckBox" HorizontalAlignment="Left" Margin="360.534,425.179,0,0" VerticalAlignment="Top" Height="20.281" Width="139.986"/>
</Grid>
</UserControl>
Note, for the sake of clarity I removed the Styles from MainUserControl. Therefore, this XAML might not be working.
