This is a migrated thread and some comments may be shown as answers.

Alert/Prompt/Confirm cuts off long text

10 Answers 411 Views
Window
This is a migrated thread and some comments may be shown as answers.
Michael Fooks
Top achievements
Rank 1
Michael Fooks asked on 28 Jan 2010, 07:04 AM
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?

10 Answers, 1 is accepted

Sort by
0
Konstantina
Telerik team
answered on 02 Feb 2010, 10:54 AM
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.
0
Michael Fooks
Top achievements
Rank 1
answered on 03 Feb 2010, 06:42 AM
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.
0
Kareema
Top achievements
Rank 2
answered on 01 Mar 2012, 12:47 PM
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?
0
Dani
Telerik team
answered on 05 Mar 2012, 11:10 AM
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 >>
0
Martin
Top achievements
Rank 2
answered on 24 Apr 2013, 08:20 AM
Telerik this is something the control should handle out of the box 
0
Masha
Telerik team
answered on 29 Apr 2013, 07:54 AM
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.

0
N Mackay
Top achievements
Rank 1
answered on 21 May 2013, 08:35 AM
I'd have to agree with Martin, it's a pain and the workaround isn't really acceptable.
0
Chetan
Top achievements
Rank 1
answered on 01 Jan 2014, 05:28 AM
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
0
Kalin
Telerik team
answered on 03 Jan 2014, 09:04 AM
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 >>
0
Chetan
Top achievements
Rank 1
answered on 15 Jan 2014, 09:51 AM
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
:)

Tags
Window
Asked by
Michael Fooks
Top achievements
Rank 1
Answers by
Konstantina
Telerik team
Michael Fooks
Top achievements
Rank 1
Kareema
Top achievements
Rank 2
Dani
Telerik team
Martin
Top achievements
Rank 2
Masha
Telerik team
N Mackay
Top achievements
Rank 1
Chetan
Top achievements
Rank 1
Kalin
Telerik team
Share this question
or