RadWindows and Button Style templates not working

[Timothy]

* In the following xaml code I'm setting a Style for the button control which works fine as long as its not in the RadWindow, but does not appear to apply the style loaded as part of  a RadWindows, Is this not supported?? If So what do I need to do to get it to work in this code:

Button Style Code that works outside the radwindow control:

<Style x:Key="ButtonFlagStyle" TargetType="Button">
              <Setter Property="Template">
                  <Setter.Value>
                      <ControlTemplate TargetType="Button">
                          <Grid Background="Transparent" Width="48" Height="48">
                              <VisualStateManager.VisualStateGroups>
                                  <VisualStateGroup x:Name="CommonStates">
                                      <VisualState x:Name="Normal"/>
                                      <VisualState x:Name="Pressed">
                                          <Storyboard>
                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="image">
                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                              </ObjectAnimationUsingKeyFrames>
                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="image1">
                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                              </ObjectAnimationUsingKeyFrames>
                                          </Storyboard>
                                      </VisualState>
                                  </VisualStateGroup>
                              </VisualStateManager.VisualStateGroups>
                              <Image x:Name="image" Source="/Images/navigator_White.png" Stretch="Fill" Visibility="Collapsed"/>
                              <Image x:Name="image1" Source="/Images/navigator_Black.png" Stretch="Fill"/>
                          </Grid>
                      </ControlTemplate>
                  </Setter.Value>
              </Setter>
          </Style>

RadWindows XAML code:

<telerikPrimitives:RadWindow x:Name="SetHeadingwindow"
               WindowSizeMode="AutoSize" Margin="39,146,41,468" Grid.ColumnSpan="2">
    <Border Margin="39,146,41,468"   Width="400" x:Name="SetHeadingPanel" BorderThickness="3" BorderBrush="#FF1D4FE5" Visibility="Visible" Opacity="1" CornerRadius="20" Grid.ColumnSpan="2">
        <Border.Background>
            <LinearGradientBrush  EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#72D0D0DE" Offset="0" />
                <GradientStop Color="#73454845" Offset="1" />
            </LinearGradientBrush>
        </Border.Background>
        <Grid Height="140">
            <TextBlock Text="You can enter a MGRS cordinate" Margin="4,-90,3,0" FontSize="22" FontWeight="Bold" Foreground="Black" Height="37" Width="387" TextAlignment="Center" FontStyle="Italic" />
            <TextBox Name="HeadingCordTo" Width="300" Text="Long and Lat" FontSize="18" FontWeight="Bold" TextWrapping="Wrap" Background="#61585454" BorderBrush="#BF0E75DB" Height="63" GotFocus="HeadingCordTo_GotFocus" TextChanged="HeadingCordTo_TextChanged" KeyDown="HeadingCordTo_KeyDown" Margin="21,0,73,0" SelectionForeground="#FFF8F8F8" SelectionBackground="#FF8DC8E5" Foreground="#FF1414C7" Opacity="0.9" KeyUp="HeadingCordTo_KeyUp" />
            <Button x:Name="bnntSet"  Click="SetHeadingCommit_Click" Margin="311,35,-2,32" BorderBrush="Black" Foreground="Black" Style="{StaticResource ButtonFlagStyle}" />
            <TextBlock Name="MgrstosetText" Text="mgrscord" Margin="34,96,86,7" FontSize="20" FontWeight="Bold" Foreground="Black" Height="37" Width="274" TextAlignment="Center" FontStyle="Normal" HorizontalAlignment="Stretch" />
        </Grid>
    </Border>
</telerikPrimitives:RadWindow>

[Victor]

Hello Timothy,

 Thank you for the question.
RadWindow inserts itself in the first panel it finds starting from the Application.RootVisual. This means that if you have this structure Frame -> Page -> LayouRoot -> Grid and if you define your button style in the Grid, it will not be applied to buttons in RadWindow. This is because RadWindow has inserted itself one level above the Grid, in LayoutRoot. Please try setting your button style in your Page's resources.

Write again if you need further assistance.

Regards,
Victor
the Telerik team

[Timothy]

I have tried setting it in the page resources as follows as well as under <Grid.Resources> Under Grid x:Name=LayoutRoot in the page itself to no avail, previously I had it in App.xaml under Application.Resources / ReSourceDictionary.

Also bear in mind I'm setting RootFrame as follows:

RootFrame =

 

New RadPhoneApplicationFrame()

<phone:PhoneApplicationPage.Resources>
    <Style x:Name="ButtonFlagStyle" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent" Width="48" Height="48">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="image">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="image1">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Image x:Name="image" Source="/Images/navigator_White.png" Stretch="Fill" Visibility="Collapsed"/>
                        <Image x:Name="image1" Source="/Images/navigator_Black.png" Stretch="Fill"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

[Timothy]

I switched from Button control to toggle control which also used a Style template in App.XAML and it works, the button style was using some image controls and may be the reason it wasn't working.

 

 

<ToggleButton Style="{StaticResource ToggleStyleForHead}" Click="SetHeadingCommit_Click" Height="62" HorizontalAlignment="Left" Margin="313,58,0,0" Name="bnntSet" VerticalAlignment="Top" Width="75" IsChecked="False" Content="Set" FontSize="16" Foreground="AntiqueWhite" BorderBrush="Black" IsThreeState="False" Background="Transparent"></ToggleButton>

[Victor]

Hello Timothy,

 Thank you for the clarification.
This most likely happens because RadPhoneApplicationFrame inserts one additional panel above the PhoneApplicationPage because of its ControlTemplate. Since RadWindow inserts its content in the first panel it fands, in the RadPhoneApplicationFrame case, it inserts the content above the page and every resource defined under the page is not visible to window's content. In order to have appropriate styles applied in RadWindow, they should either be declared in the application's resources, or inside the window itself. Here is a xaml example of a style define in RadWindow itself:

<telerikPrimitives:RadWindow>
    <Grid>
        <Grid.Resources>
            <Style TargetType="Button">
                <Setter Property="Background"
            Value="Red"/>
            </Style>
        </Grid.Resources>

        <Button VerticalAlignment="Center"
                Content="Button"/>
    </Grid>
</telerikPrimitives:RadWindow>

Please write again if you need further assistance.

Best wishes,
Victor
the Telerik team