Rounded Corners

2 posts, 0 answers
  1. David
    David avatar
    5 posts
    Member since:
    May 2015

    Posted 31 Jul Link to this post

    Hello,

    I would like to know how to change the RadDesktopAlert appearance so that it will have rounded corners.

  2. Masha
    Admin
    Masha avatar
    355 posts

    Posted 02 Aug Link to this post

    Hello David,

    You need to modify the control template of RadDesktopAlertStyle and to add the ConrerRadius property to the first outer border. Please check the code snippet below which is from OfficeBlack theme.


    <ControlTemplate x:Key="RadDesktopAlertTemplate" TargetType="telerikNavigation:RadDesktopAlert">
          <Grid x:Name="LayoutRoot" Background="{StaticResource DesktopAlert_Background}">
              <Border
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}"
                      CornerRadius="2">
                  <Border BorderThickness="1" BorderBrush="{StaticResource DesktopAlert_InnerBorderBrush}">
                      <Grid Margin="{TemplateBinding Padding}">
                          <Grid.RowDefinitions>
                              <RowDefinition Height="Auto"/>
                              <RowDefinition Height="*"/>
                          </Grid.RowDefinitions>
                          <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="Auto"/>
                              <ColumnDefinition Width="*"/>
                          </Grid.ColumnDefinitions>
                          <ContentPresenter
                                  Content="{TemplateBinding Header}"
                                  ContentTemplate="{TemplateBinding HeaderTemplate}"
                                  Grid.Row="0"
                                  Grid.Column="1"
                                  VerticalAlignment="Top"
                                  TextBlock.Foreground="{TemplateBinding Foreground}"/>
                          <ContentPresenter x:Name="Icon"
                                  Grid.Column="0"
                                  Grid.RowSpan="2"
                                  Content="{TemplateBinding Icon}"
                                  Width="{TemplateBinding IconColumnWidth}"
                                  Margin="{TemplateBinding IconMargin}"
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Center"
                                  ContentTemplate="{TemplateBinding IconTemplate}"/>
                          <ContentPresenter x:Name="Content"
                                  Grid.Row="1"
                                  Grid.Column="1"
                                  Margin="0 7 0 0"
                                  TextBlock.Foreground="{TemplateBinding Foreground}"
                                  telerikNavigation:WindowHost.HitTestable="True"
                                  VerticalAlignment="Top"
                                  HorizontalAlignment="Left"
                                  Cursor="Hand">
                              <ContentPresenter.Resources>
                                  <Style TargetType="TextBlock">
                                      <Setter Property="TextWrapping" Value="Wrap"/>
                                      <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
                                      <Style.Triggers>
                                          <Trigger Property="TextBlock.IsMouseOver" Value="True">
                                              <Setter Property="TextDecorations" Value="Underline"/>
                                          </Trigger>
                                      </Style.Triggers>
                                  </Style>
                              </ContentPresenter.Resources>
                          </ContentPresenter>
                      </Grid>
                  </Border>
              </Border>
          </Grid>
          <ControlTemplate.Triggers>
              <Trigger Property="IsMouseOverAlert" Value="True">
                  <Trigger.EnterActions>
                      <BeginStoryboard Storyboard="{StaticResource DesktopAlertOnMouseEnter}"/>
                  </Trigger.EnterActions>
                  <Trigger.ExitActions>
                      <BeginStoryboard Storyboard="{StaticResource DesktopAlertOnMouseLeave}"/>
                  </Trigger.ExitActions>
              </Trigger>
          </ControlTemplate.Triggers>
      </ControlTemplate>

    I hope this helps.

    Regards,
    Masha
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top