RadWindows and Button Style templates not working

5 posts, 0 answers
  1. Timothy
    Timothy avatar
    5 posts
    Member since:
    Apr 2011

    Posted 11 Nov 2011 Link to this post

    * 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>
  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 11 Nov 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Timothy
    Timothy avatar
    5 posts
    Member since:
    Apr 2011

    Posted 11 Nov 2011 Link to this post

    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>

  5. Timothy
    Timothy avatar
    5 posts
    Member since:
    Apr 2011

    Posted 11 Nov 2011 Link to this post

    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>


  6. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 16 Nov 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
DevCraft banner