Alert/Prompt/Confirm cuts off long text

11 posts, 0 answers
  1. Michael Fooks
    Michael Fooks avatar
    17 posts
    Member since:
    Dec 2009

    Posted 28 Jan 2010 Link to this post

    Adding a longish text string to the Alert/Prompt/Confirm cuts off the text and you lose the prompt buttons e.g:

    Humpty Dumpty sat on a wall. Humpty dumpty had a great fall. All the kings horses and all the kings men couldn't put humpty together again. Jack and Jill went up a hill to fetch a pale of water. Jack fell down and broke his crown


    Is there a way to make the text wrap/window height grow?
  2. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 02 Feb 2010 Link to this post

    Hello Bronwen,

    Thank you for contacting us.

    To wrap the text in the Alert window, you will need to set the Width property of the Alert. This is achieved by setting a custom style to the Alert. In this style you should also replace the Content Control, which holds the Alert content, with a TextBlock and set its TextWrapping property to "Wrap".
    Attached, you will find a sample running project, which illustrates the above-mentioned approach.

    If you have further questions please feel free to contact us again.

    Greetings,
    Konstantina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Michael Fooks
    Michael Fooks avatar
    17 posts
    Member since:
    Dec 2009

    Posted 03 Feb 2010 Link to this post

    Thanks for that. I just thought maybe the text wrapping should be the default behaviour rather than us having  to create a style for each of the windows + theming on top of that.
  5. Kareema
    Kareema avatar
    17 posts
    Member since:
    Aug 2011

    Posted 01 Mar 2012 Link to this post

    Hi, I'd also like to make use of the custom style you've provided, but it doesn't match the theme style of my window. Could you provide a style with an exclamation mark icon that looks like the one I've attached?
  6. Dani
    Admin
    Dani avatar
    848 posts

    Posted 05 Mar 2012 Link to this post

    Hi Kareema,

    I strongly recommend that you upgrade to a later version of the control, as your custom style will most probably be inconsistent with the latest xaml od RadWindow.

    The icon itself is easily obtainable from Expression Blend. If you drag a RadAlert control onto the design surface and edit its template, you will find the xaml for the alert icon.

    I also include it below for yoor convenience:
    <DataTemplate x:Key="AlertIconTemplate">
            <Grid Height="44" Width="46">
                <Path Stretch="Fill" Margin="-22.792,0,0,0.274" RenderTransformOrigin="0.749972820281982,0.500000059604645" Data="M24.177877,0.032801032 C24.973236,0.35406893 25.418495,1.4006116 25.418495,1.4006121 C25.418495,1.4006116 46.196983,38.359432 46.196983,40.912521 C46.196983,43.465626 43.744934,43.759003 43.744934,43.759003 L23.09598,43.759003 L2.4520493,43.758999 C2.4520493,43.758999 0,43.465626 0,40.912521 C0,38.359428 20.841993,1.4006089 20.841993,1.4006094 C20.841993,1.4006089 21.290586,0.35406619 22.085945,0.032798279 z" HorizontalAlignment="Left" Width="46.197">
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.378,0.983" StartPoint="0.622,0.017">
                            <GradientStop Color="#FFFFDA45" Offset="0.325"/>
                            <GradientStop Color="#FFFF9945" Offset="1"/>
                        </LinearGradientBrush>
                    </Path.Fill>
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="-1"/>
                            <SkewTransform AngleX="0" AngleY="0"/>
                            <RotateTransform Angle="0"/>
                            <TranslateTransform X="-2.6427077841617574E-06"/>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
                <Path Stretch="Fill" Margin="-22.792,17.862,0,0.274" RenderTransformOrigin="0.749972820281982,0.500000059604645" Data="M44.972065,37.721554 C45.75716,39.384399 46.196983,40.533127 46.196983,40.912521 C46.196983,43.465626 43.744934,43.759003 43.744934,43.759003 L23.09598,43.759003 L2.4520493,43.758999 C2.4520493,43.758999 0,43.465626 0,40.912521 C0,39.551815 5.8988295,28.605951 11.450073,18.315256 C11.575222,18.08326 44.685875,37.115395 44.972065,37.721554 z" HorizontalAlignment="Left" Width="46.197">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="-1"/>
                            <SkewTransform AngleX="0" AngleY="0"/>
                            <RotateTransform Angle="0"/>
                            <TranslateTransform X="-2.6427077841617574E-06"/>
                        </TransformGroup>
                    </Path.RenderTransform>
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.378,0.983" StartPoint="0.524,0.404">
                            <GradientStop Color="#FFFCB827" Offset="0.675"/>
                            <GradientStop Color="#FFFE9A0A" Offset="0.122"/>
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
                <Path Stretch="Fill" Margin="-21.842,1.273,0,0.647" RenderTransformOrigin="0.749972820281982,0.500000059604645" Data="M24.177877,0.032801032 C24.973236,0.35406893 25.201269,1.4006116 25.201269,1.4006121 C25.201269,1.4006116 45.979759,38.359432 45.979759,40.912521 C45.979759,43.465626 43.52771,43.626354 43.52771,43.626354 L23.09598,43.626354 L2.8015947,43.62635 C2.8015947,43.62635 0.34954548,43.465626 0.34954548,40.912521 C0.34954548,38.359428 21.19154,1.4006089 21.19154,1.4006094 C21.19154,1.4006089 21.640133,0.35406619 22.435492,0.032798279 z" Stroke="#FFFEF065" HorizontalAlignment="Left" Width="44.514">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="-1"/>
                            <SkewTransform AngleX="0" AngleY="0"/>
                            <RotateTransform Angle="0"/>
                            <TranslateTransform X="0.80997209357889233"/>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
                <Path Stretch="Fill" Height="17.453" Margin="6,0,6,0.522" VerticalAlignment="Bottom" Data="M179.65936,132.98976 L209.18358,132.98976 C209.18358,132.98976 207.00056,119.53224 194.23856,119.53224 C182.50038,119.53224 179.65936,132.98976 179.65936,132.98976 z" >
                    <Path.OpacityMask>
                        <RadialGradientBrush GradientOrigin="0.502,0.9">
                            <GradientStop Color="#A8FFD100" Offset="0.404"/>
                            <GradientStop Color="Transparent" Offset="0.914"/>
                            <GradientStop Color="#A0DCA209" Offset="0.238"/>
                        </RadialGradientBrush>
                    </Path.OpacityMask>
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#24FEF9BA" Offset="1"/>
                            <GradientStop Color="#BBFBFC18" Offset="0.913"/>
                            <GradientStop Color="#48FED72C" Offset="0.272"/>
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
                <Path Stretch="Fill" Margin="-23,0,0,0.274" RenderTransformOrigin="0.749972820281982,0.500000059604645" Data="M24.177877,0.032801032 C24.973236,0.35406893 25.418495,1.4006116 25.418495,1.4006121 C25.418495,1.4006116 46.196983,38.359432 46.196983,40.912521 C46.196983,43.465626 43.744934,43.759003 43.744934,43.759003 L23.09598,43.759003 L2.4520493,43.758999 C2.4520493,43.758999 0,43.465626 0,40.912521 C0,38.359428 20.841993,1.4006089 20.841993,1.4006094 C20.841993,1.4006089 21.290586,0.35406619 22.085945,0.032798279 z" HorizontalAlignment="Left" Width="46.197">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="-1"/>
                            <SkewTransform AngleX="0" AngleY="0"/>
                            <RotateTransform Angle="0"/>
                            <TranslateTransform X="-2.6427077841617574E-06"/>
                        </TransformGroup>
                    </Path.RenderTransform>
                    <Path.Stroke>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFF66E04" Offset="0"/>
                            <GradientStop Color="#FFC35602" Offset="1"/>
                        </LinearGradientBrush>
                    </Path.Stroke>
                </Path>
                <Path Stretch="Fill" Margin="19.923,13.002,0,14.998" Data="M118.27322,79.474892 C118.27322,79.474892 118.85989,78.476952 119.21207,78.418251 C119.56425,78.359558 121.20724,78.418251 121.20724,78.418251 C121.20724,78.418251 121.9702,79.122696 122.02888,79.298744 C122.08757,79.474792 122.08733,91.269852 122.08733,91.269852 L121.14874,92.795433 L119.1532,92.79541 L118.21424,91.269402 z" Fill="White" HorizontalAlignment="Left" Width="5"/>
                <Ellipse Fill="White" Height="6" Margin="19,0,0,5" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="6"/>
            </Grid>
        </DataTemplate>

    I hope this helps.

    Greetings,
    Dani
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  7. Martin
    Martin avatar
    39 posts
    Member since:
    Sep 2008

    Posted 24 Apr 2013 Link to this post

    Telerik this is something the control should handle out of the box 
  8. Masha
    Admin
    Masha avatar
    355 posts

    Posted 29 Apr 2013 Link to this post

    Hello Martin,

    The reason it is so hard to modify the RadAlert icon is because it is a modal window.
    Changing the icon of the RadAlertWindow can be achieved only by modifying a control template of RadAlertWindow style. You can always use RadWindow and use its Icon property.

    Please let me know if you have any questions how to change the RadAlert icon.

    All the best,
    Masha
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  9. N Mackay
    N Mackay avatar
    228 posts
    Member since:
    Dec 2010

    Posted 21 May 2013 Link to this post

    I'd have to agree with Martin, it's a pain and the workaround isn't really acceptable.
  10. Chetan
    Chetan avatar
    26 posts
    Member since:
    Oct 2012

    Posted 31 Dec 2013 Link to this post

    I am having smiler problem,
    I have checked the attached project but Theme.xaml is not found.
    I have created style as below for radalert content. its display as required, but on click my button window not get close,
    ( if i remove content style then default rad button shows and on click window get closed)
    please help to sort out same.

    <DataTemplate x:Key="AlertIconTemplate">
          <Path
                  Fill="{telerik:Windows8TouchResource ResourceKey=MediumBrush}"
                  Height="32"
                  Stretch="Fill"
                  Width="8"
                  Data="F1M242.9468,305.3369L242.4158,318.8359L238.9138,318.8359L238.4058,305.3369z M243.1938,322.9739C243.1938,323.6119,242.9678,324.1499,242.5098,324.5869C242.0558,325.0239,241.4528,325.2429,240.7068,325.2429C239.9668,325.2429,239.3618,325.0199,238.8928,324.5719C238.4228,324.1259,238.1878,323.5939,238.1878,322.9739C238.1878,322.3169,238.4268,321.7809,238.9048,321.3619C239.3888,320.9439,239.9828,320.7339,240.7068,320.7339C241.4328,320.7339,242.0308,320.9459,242.4968,321.3689C242.9618,321.7909,243.1938,322.3269,243.1938,322.9739"/>
      </DataTemplate>
     
      <Style x:Key="RadAlertStyle" TargetType="{x:Type telerik:RadAlert}">
          <Setter Property="IsTabStop" Value="False"/>
          <Setter Property="MinWidth" Value="275"/>
          <Setter Property="MaxWidth" Value="500"/>
          <Setter Property="SnapsToDevicePixels" Value="True"/>
          <Setter Property="Template">
              <Setter.Value>
                  <ControlTemplate TargetType="{x:Type telerik:RadAlert}">
                      <Grid x:Name="LayoutRoot">
                          <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="Auto"/>
                              <ColumnDefinition Width="*"/>
                          </Grid.ColumnDefinitions>
                          <Grid.RowDefinitions>
                              <RowDefinition Height="*"/>
                              <RowDefinition Height="Auto"/>
                          </Grid.RowDefinitions>
                          <ContentPresenter x:Name="Icon" Content="{TemplateBinding Content}" Margin="16,8,8,8" VerticalAlignment="Top" ContentTemplate="{StaticResource AlertIconTemplate}">
                          </ContentPresenter>
                          <ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Hidden" Margin="0,0,0,8" Grid.Row="0" VerticalScrollBarVisibility="Auto">
                              <ContentPresenter x:Name="AlertText" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Margin="8,8,8,0" VerticalAlignment="Center"/>
                          </ScrollViewer>
                          <Border x:Name="HorizontalRule" BorderBrush="White" BorderThickness="0,0,0,1" Background="#26000000" Grid.ColumnSpan="2" Height="2" Grid.Row="1" VerticalAlignment="Top"/>
                          <StackPanel x:Name="DialogButtons" Grid.ColumnSpan="2" HorizontalAlignment="Right" Orientation="Horizontal" Grid.Row="2">
                              <telerik:RadButton x:Name="Ok" Cursor="Hand"   Margin="10,10,8,8" MinWidth="48" Style="{DynamicResource roundBtnWthEfects}">
                                  <Image   Height="42" Width="42"  Stretch="Fill" Source="/myproject;component/Assets/Images/oknew.png" />
                              </telerik:RadButton>
                          </StackPanel>
                      </Grid>
                  </ControlTemplate>
              </Setter.Value>
          </Setter>
      </Style>

        
    <Style TargetType="{x:Type telerik:RadButton}" x:Key="roundBtnWthEfects" >
            <Setter Property="Width" Value="42" />
            <Setter Property="Height" Value="42" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Name="grid" RenderTransformOrigin="0.5,0.5" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"  ClipToBounds="True">
                            <!-- Outer Rectangle with rounded corners. -->
                            <Ellipse x:Name="outerEllipse"   Opacity=".6"  Fill="Transparent"  StrokeThickness="2"  Stroke="#80000000"   />
     
                            <!-- Present Content (text) of the button. -->
                            <ContentPresenter  x:Name="myContentPresenter" Opacity=".6"  Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />
                        </Grid>
                        <ControlTemplate.Triggers>
     
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property ="Ellipse.Fill" TargetName="outerEllipse"  Value="{StaticResource btnPressedColor}" />
                            </Trigger>
     
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property ="ContentPresenter.Opacity" TargetName="myContentPresenter"  Value="1" />
                                <Setter Property ="Ellipse.Opacity" TargetName="outerEllipse"  Value="1" />
                                <Setter Property="Ellipse.Stroke" TargetName="outerEllipse" Value="#FF000000"/>
                            </Trigger>
     
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property ="ContentPresenter.Opacity" TargetName="myContentPresenter"  Value="0.1" />
                                <Setter Property ="Ellipse.Opacity" TargetName="outerEllipse"  Value="0.1" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    also i have checked with Command="telerik:WindowCommands.Close"  but then the button become enable = false
  11. Kalin
    Admin
    Kalin avatar
    1209 posts

    Posted 03 Jan 2014 Link to this post

    Hi Chetan,

    The default command for the button in the Alert is Command="telerik:WindowCommands.Confirm" please try give it a try. I tested it in a sample project and it worked as expected.

    Hope this helps.

    Regards,
    Kalin
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  12. Chetan
    Chetan avatar
    26 posts
    Member since:
    Oct 2012

    Posted 15 Jan 2014 Link to this post

    Thanks for reply,

    I have found other problem in my code in style i change x:name of ok button to "Ok" and when revert to "OK" it works
    :)

Back to Top
UI for WPF is Visual Studio 2017 Ready