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

[Solved] Disable the RadialMenuItem

6 Answers 136 Views

RadialMenu for XAML

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

This question is locked. New answers and comments are not allowed.

Florian asked on 25 Apr 2014, 03:51 PM

Hi Telerik,

we are trying to disable a RadialMenuItem in our RadialMenu but it isnt working. We tried both the Selected Property and the IsEnabled Property of the RadialMenuItem.

This is our RadialMenuItemstyle:

<telerik:RadialMenuItem Header="Export" Selectable="False" Command="{StaticResource customCommand}">

<telerik:RadialMenuItem.IconContent>

<Path Width="53.5" Height="46" Stretch="Uniform" Fill="Black" Data="shortend" UseLayoutRounding="False"/>

</telerik:RadialMenuItem.IconContent>

</telerik:RadialMenuItem>

We want to get it disabled like WinRT Buttons do (gray effect).

Regards,
Florian

6 Answers, 1 is accepted

answered on 02 May 2014, 08:50 AM

RadialMenuSample.zip

Hi,

I have prepared a project where I change the RadialMenuItem.IsEnabled property to false and the item is non-clickable and it has different appearance(disabled visual state : by default the color is gray). Please see the attached file. Also, you can change the color of the Header and the Icon in the RadialMenuItem when it is disabled through the TelerikRadialDisabledMenuButtonForegroundBrush.
More information about resolving the Telerik Named Resources can be found here.

Let me know if this helps.

Regards,
Ivaylo Gergov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 05 May 2014, 08:58 AM

Hi Ivaylo,

Thanks for your answer.

Your sample works well for me.

In our Scenario, the RadialMenu isn't directly child of a page.
Its in a style, which is set to a popup. The popup is opeing and displaying the RadialMenu (IsOpen of RadialMenu = true).

This is the Style Code.

<Style x:Key="CustomOptionsDialogStyle" TargetType="controls:InputDialog">

<Setter Property="Background" Value="{StaticResource GerontoBlauBrush}" />

<Setter Property="BorderBrush" Value="#80FFFFFF" />

<Setter Property="BorderThickness" Value="1" />

<Setter Property="Padding" Value="25" />

<Setter Property="ButtonsPanelOrientation" Value="Vertical" />

<Setter Property="InputText" Value="" />

<Setter Property="AwaitsCloseTransition" Value="False" />

<Setter Property="BackgroundScreenBrush" >

<Setter.Value>

<SolidColorBrush Color="#FFA6A6A6" Opacity="0.7"/>

</Setter.Value>

</Setter>

<Setter Property="IsLightDismissEnabled" Value="True" />

<Setter Property="BackgroundStripeBrush" Value="Transparent" />

<Setter Property="TitleStyle">

<Setter.Value>

<Style TargetType="TextBlock" BasedOn="{StaticResource BaselineTextStyle}">

<Setter Property="FontSize" Value="26.667"/>

<Setter Property="FontWeight" Value="Light"/>

<Setter Property="LineHeight" Value="30"/>

<Setter Property="Margin" Value="0,0,0,10"/>

<Setter Property="Foreground" Value="White"/>

<Setter Property="RenderTransform">

<Setter.Value>

<TranslateTransform X="-1" Y="6"/>

</Setter.Value>

</Setter>

</Style>

</Setter.Value>

</Setter>

<Setter Property="TextStyle">

<Setter.Value>

<Style TargetType="TextBlock" BasedOn="{StaticResource BaselineTextStyle}" >

<Setter Property="FontWeight" Value="SemiLight"/>

<Setter Property="TextWrapping" Value="Wrap" />

<Setter Property="FontSize" Value="14.6667" />

<Setter Property="Foreground" Value="White" />

<Setter Property="Margin" Value="0,10,0,20" />

</Style>

</Setter.Value>

</Setter>

<Setter Property="InputTextStyle">

<Setter.Value>

<Style TargetType="TextBox">

<Setter Property="Margin" Value="3,0,3,10" />

<Setter Property="TextWrapping" Value="Wrap" />

<Setter Property="MinHeight" Value="150" />

<Setter Property="AcceptsReturn" Value="True" />

</Style>

</Setter.Value>

</Setter>

<Setter Property="ButtonStyle">

<Setter.Value>

<Style TargetType="ButtonBase" >

<Setter Property="BorderThickness" Value="1" />

<Setter Property="Height" Value="50" />

<Setter Property="BorderBrush" Value="White" />

<Setter Property="Foreground" Value="White" />

</Style>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="controls:InputDialog">

<Grid x:Name="LayoutRoot" Background="Transparent">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup

x:Name="PopupStates">

<VisualState

x:Name="OpenPopupState">

<Storyboard>

<DoubleAnimation

Storyboard.TargetName="LayoutRoot"

Storyboard.TargetProperty="Opacity"

From="0"

To="1"

Duration="0:0:0.4">

<DoubleAnimation.EasingFunction>

<PowerEase

EasingMode="EaseOut"

Power="3" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

<DoubleAnimation

x:Name="SlideInAnimation"

Storyboard.TargetName="ContentBorderTranslation"

Storyboard.TargetProperty="X"

From="200"

To="0"

Duration="0:0:.4">

<DoubleAnimation.EasingFunction>

<PowerEase

EasingMode="EaseOut"

Power="2" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</VisualState>

<VisualState

x:Name="ClosedPopupState">

<Storyboard>

<DoubleAnimation

x:Name="SlideOutAnimation"

Storyboard.TargetName="ContentBorderTranslation"

Storyboard.TargetProperty="X"

From="0"

To="-200"

Duration="0:0:.4">

<DoubleAnimation.EasingFunction>

<PowerEase

EasingMode="EaseOut"

Power="2" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

<DoubleAnimation

Storyboard.TargetName="LayoutRoot"

Storyboard.TargetProperty="Opacity"

From="1"

To="0"

Duration="0:0:.4">

<DoubleAnimation.EasingFunction>

<PowerEase

EasingMode="EaseOut"

Power="3" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border

x:Name="BlackStripe"

Background="Transparent"

VerticalAlignment="Center"

HorizontalAlignment="Center">

<Grid>

<Border Visibility="Collapsed"

x:Name="ContentBorder"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

VerticalAlignment="Bottom"

HorizontalAlignment="Center">

<Border.RenderTransform>

<TranslateTransform

x:Name="ContentBorderTranslation" />

</Border.RenderTransform>

<StackPanel x:Name="ContentPanel" Margin="{TemplateBinding Padding}" />

</Border>

<telerik:RadRadialMenu x:Name="AssessmentRadialMenu" IsOpen="True" Height="400" Width="400" StartAngle="6" >

<telerik:RadialMenuItem x:Name="btnBearbeiten" Header="Bearbeiten" Selectable="False" IsEnabled="False" Command="{StaticResource customCommand}" >

<telerik:RadialMenuItem.IconContent>

<Path Width="70.5" Height="45" Stretch="Uniform" Fill="Black" Data=

"M4.0236244,39.052L40.165103,39.052C40.450301,39.052 40.681998,39.283888 40.681998,39.569201 40.681998,39.853109 40.450301,40.084997 40.165103,40.084997L4.0236244,40.084997C3.7397775,40.084997 3.5079999,39.853109 3.508,39.569201 3.5079999,39.283888 3.7397775,39.052 4.0236244,39.052z M1.4660637,29.870001L4.6666819,32.565367 7.862,35.26193 3.9297002,36.685066 0,38.107 0.72917366,33.9897z M18.590957,6.6210001L27.38,14.024666 12.187496,32.056002 3.4010005,24.651047z M27.067681,0.0002617836C28.355897,0.012507915 29.647309,0.45489883 30.707934,1.3482051 33.134921,3.3910286 33.444808,7.0237912 31.400603,9.4456298L29.49709,11.706 20.711001,4.302387 22.612012,2.0420456C23.760415,0.67982674,25.411407,-0.015483379,27.067681,0.0002617836z"

UseLayoutRounding="False"/>

</telerik:RadialMenuItem.IconContent>

</telerik:RadialMenuItem>

<telerik:RadialMenuItem Header="Kommentieren" Selectable="False" Command="{StaticResource customCommand}">

<telerik:RadialMenuItem.IconContent>

<Path Width="48.498" Height="43.5" Stretch="Uniform" UseLayoutRounding="False" Fill="Black" Data=

"M63.999996,18.073C75.039375,18.073 83.987999,27.021107 83.987999,38.060093 83.987999,45.185016 80.249702,51.420254 74.638161,54.960716L78.53746,66.255996 67.361382,57.743488C66.266457,57.929485 65.14843,58.048084 63.999996,58.048084 52.960621,58.048084 44.012001,49.098976 44.012001,38.060093 44.012001,27.021107 52.960621,18.073 63.999996,18.073z M0,0L64,0 64,11.406C49.302826,11.405999 37.346001,23.36313 37.346001,38.060093 37.346001,41.045597 37.839336,43.918018 38.748764,46.600113L38.955521,47.186001 21.946999,47.186001 11.108,63.462002 11.108,47.186001 0,47.186001z"

/>

</telerik:RadialMenuItem.IconContent>

</telerik:RadialMenuItem>

<telerik:RadialMenuItem Header="Drucken" Selectable="False" Command="{StaticResource customCommand}">

<telerik:RadialMenuItem.IconContent>

<Path Width="53.5" Height="46" Stretch="Uniform" Fill="Black" Data=

"M14.039,59.777L49.960999,59.777 49.960999,63.681 14.039,63.681z M0,30.562L64,30.562 64,57.195 0,57.195z M19.201,16.723L19.201,19.201 44.799,19.201 44.799,16.723z M19.201,11.149L19.201,13.625999 44.799,13.625999 44.799,11.149z M19.201,5.5740013L19.201,8.052 44.799,8.052 44.799,5.5740013z M14.039,0L45.235672,0 49.960999,4.6842117 49.960999,26.013 14.039,26.013z"

UseLayoutRounding="False"/>

</telerik:RadialMenuItem.IconContent>

</telerik:RadialMenuItem>

<telerik:RadialMenuItem Header="Vorschau" Selectable="False" Command="{StaticResource customCommand}">

<telerik:RadialMenuItem.IconContent>

<Path Width="53.5" Height="46" Stretch="Uniform" Fill="Black" Data=

"M26.039215,27.629606C24.107988,27.5842 22.149706,28.184616 20.511932,29.472662 16.77305,32.416664 16.125353,37.835873 19.06934,41.576878 22.011927,45.318378 27.430601,45.964779 31.172083,43.021477 34.913666,40.078873 35.559963,34.660168 32.615376,30.918665 30.960508,28.813955 28.522223,27.687988 26.039215,27.629606z M26.175369,21.674006C30.374353,21.772219 34.498257,23.675474 37.298256,27.23436 41.403736,32.454266 41.370037,39.598373 37.681053,44.73708L49.014999,59.141796 42.839928,64 31.546482,49.648384C25.63571,52.165989 18.550442,50.550785 14.386461,45.260479 9.4086151,38.932873 10.50158,29.769463 16.82905,24.790958 19.598192,22.613169 22.909492,21.597618 26.175369,21.674006z M17.5919,3.8808338E-30L35.9291,3.8808338E-30C38.934898,-3.5527137E-15,41.373001,2.4387343,41.373001,5.4433918L41.373001,24.876833 41.308846,24.805635C40.161221,23.562506,38.841671,22.462914,37.384888,21.539429L37.016998,21.312212 37.016998,5.4433918C37.016998,4.8445082,36.527302,4.3547654,35.9291,4.3547649L17.877001,4.3547649 17.584,13.852381C17.584,13.852381,17.205099,20.131718,10.2845,19.373112L4.3529701,19.213013 4.3529701,46.19437C4.3529696,46.795174,4.8424096,47.281574,5.4440298,47.281574L9.5967226,47.281574 9.7358932,47.479958C10.809489,48.970966,12.10646,50.308796,13.581778,51.45116L13.827712,51.637001 5.4440298,51.637001C2.4367697,51.637001,-2.9663937E-07,49.200287,2.7083472E-14,46.19437L2.7083472E-14,18.560608 2.156249,16.286495 2.15833,16.225395 13.4551,4.3547649 13.4238,4.3547649 10.4036,7.5417938 13.5677,4.1882553 13.6134,4.1882553 13.7129,4.0832739 13.7227,4.0832739z"

UseLayoutRounding="False"/>

</telerik:RadialMenuItem.IconContent>

</telerik:RadialMenuItem>

<telerik:RadialMenuItem Header="Export" Selectable="False" Command="{StaticResource customCommand}">

<telerik:RadialMenuItem.IconContent>

<Path Width="53.5" Height="46" Stretch="Uniform" Fill="Black" Data=

"M7.6448536,28.572465C5.1143398,29.321172 3.2635136,31.219585 2.6202049,31.95009 2.6280251,31.808189 2.356535,32.261993 2.356535,32.261993 2.356535,32.261993 2.4607849,32.133092 2.6202049,31.95009 2.6175251,32.005491 2.5765038,32.142791 2.4554157,32.441694 2.0205956,33.515901 3.3663025,33.488502 3.3663025,33.488502 7.1807442,32.910997 7.6448536,28.572465 7.6448536,28.572465z M29.497485,24.916215C28.788642,24.916154 28.351388,24.958539 28.351388,24.958539 32.41118,28.265863 36.186571,27.494958 36.186571,27.494958 37.732168,27.302356 35.374073,25.970947 35.374073,25.970947 33.193819,25.071157 30.85073,24.916334 29.497485,24.916215z M15.625316,15.985075C15.625316,15.985075,14.15922,23.086126,12.327924,25.192241L22.486601,23.68123C22.486601,23.68123,17.424112,19.144097,15.625316,15.985075z M34.571964,7.8262539C34.769434,7.8133474,34.994606,7.8998456,35.23263,8.0976054L36.79708,9.4043382C37.556257,10.040459,38.799718,11.079494,39.559395,11.712915L41.125042,13.021558C41.886219,13.65698,41.874519,14.685113,41.104244,15.304233L39.515696,16.582876C38.74422,17.206696,37.483257,18.22163,36.711882,18.842151L35.123232,20.120092C34.353255,20.743913,33.731476,20.222995,33.742476,18.966455L33.763976,16.552374 24.553265,16.552374C23.904886,16.552374,23.379,16.025556,23.379,15.377135L23.379,12.830751C23.379,12.18303,23.904886,11.656913,24.553265,11.656913L33.808373,11.656913 33.829072,9.2285321C33.837186,8.3641583,34.137532,7.8546474,34.571964,7.8262539z M15.822783,2.8691583C15.709185,2.8831162 15.592195,3.0075927 15.478817,3.3033819 15.478817,3.3033819 14.930717,5.9252309 16.302514,10.281932 16.302515,10.281933 17.469812,6.8248974 16.590914,4.1791182 16.590914,4.1791182 16.228488,2.8193059 15.822783,2.8691583z M14.581626,0.00061225891C15.662847,-0.04088068 16.637714,2.0410428 16.637714,2.0410433 19.668307,8.5202198 16.802514,12.66025 16.802514,12.66025 19.803807,19.737801 25.818194,23.517129 25.818194,23.517129 31.661881,23.203327 35.925572,24.679838 35.925572,24.679838 39.279064,26.44415 38.156467,28.093362 38.156467,28.093362 34.641575,32.015291 24.318197,25.899246 24.318197,25.899246L11.011526,28.142162C9.0889406,34.722911 2.6631737,36.269222 2.6631737,36.269222 -0.40004921,36.715724 0.019384384,33.519802 0.019384384,33.519802 2.4100056,28.258064 8.4217119,27.047655 8.4217119,27.047655 10.789427,24.516437 14.660018,12.62055 14.660018,12.62055 10.749126,3.8301156 13.497121,0.90566444 13.497121,0.90566492 13.848995,0.26420975 14.221219,0.014443398 14.581626,0.00061225891z"

UseLayoutRounding="False"/>

</telerik:RadialMenuItem.IconContent>

</telerik:RadialMenuItem>

</telerik:RadRadialMenu>

<Button x:Name="DummyButton" Opacity="0" Height="1" Width="1" Content="KeyboardHide" />

</Grid>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

We open the popup in the tapped Event of a RadTile. Each RadTile shows a result of a calculation.
We want to use the RadialMenu to show the user actions for the results, either print or export etc., its working well so far.
However, not all users should export a result for example.

Regards,
Florian

answered on 08 May 2014, 07:29 AM

DisableMenuItem.zip

Hi Florian,

If the RadialMenuItem.Command property is set, the IsEnabled property is set to the result of the CanExecute(...) method of the command. The same happens when the CanExecuteChanged event is raised. In this case you have to set the IsEnabled property after the Command property. I have attached a sample project for demonstration.

I hope this helps. Please, let us know if you have further questions.

Regards,
Rosy Topchiyska
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.