Кнопка отключения с пользовательским контентом в Silverlight?

Question

Что является самым простым способом создания кнопки Silverlight с пользовательским контентом, который знает, как «смотреть« отключен? То есть если вы установите IsEnabled="False", он будет выглядеть серым.

Пользовательский контент будет мертвым простым, текстовым и изображаемым.

Я сделал это раньше в приложении WPF довольно легко, установив Content в StackPanel, содержащий TextBlock и изображение. Затем я реализовал триггер стиля на изображении, чтобы изменить его на серо-версию, когда он не был включен. Текст изменил цвет сам по себе.

Насколько я могу судить, пользовательский контент полностью исчезает, когда кнопка отключена в Silverlight.

Любая помощь приветствуется.

Cheers, Andrej.

Answer 1

Предполагая, что вы не изменили шаблон кнопки, шаблон управления по умолчанию для Button использует VisualStateManager для наложения белого прямоугольника с прозрачностью 50% на все содержимое, содержащееся в кнопке. Это должно придавать контенту «размытый» вид.

Если вы заменили шаблон, вам нужно будет воспроизвести это поведение. Silverlight не имеет триггеров стиля, поэтому вам нужно использовать VisualStateManager. У вас есть Expression Blend? Если это так, вы можете увидеть шаблон управления по умолчанию, перетащив кнопку на конструктор, щелкните правой кнопкой мыши -> изменить шаблон -> отредактируйте копию.

EDIT

Я включил шаблон управления по умолчанию для кнопки, как извлекается Blend. Обратите внимание на состояние «Отключено» в VisualStateManager.

<ControlTemplate TargetType="Button"> 
    <Grid> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="CommonStates"> 
     <VisualState x:Name="Normal"/> 
     <VisualState x:Name="MouseOver"> 
      <Storyboard> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity"> 
       <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
      </DoubleAnimationUsingKeyFrames> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> 
       <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/> 
      </ColorAnimationUsingKeyFrames> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"> 
       <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/> 
      </ColorAnimationUsingKeyFrames> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"> 
       <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/> 
      </ColorAnimationUsingKeyFrames> 
      </Storyboard> 
     </VisualState> 
     <VisualState x:Name="Pressed"> 
      <Storyboard> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"> 
       <SplineColorKeyFrame KeyTime="0" Value="#FF6DBDD1"/> 
      </ColorAnimationUsingKeyFrames> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity"> 
       <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
      </DoubleAnimationUsingKeyFrames> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> 
       <SplineColorKeyFrame KeyTime="0" Value="#D8FFFFFF"/> 
      </ColorAnimationUsingKeyFrames> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> 
       <SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/> 
      </ColorAnimationUsingKeyFrames> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"> 
       <SplineColorKeyFrame KeyTime="0" Value="#8CFFFFFF"/> 
      </ColorAnimationUsingKeyFrames> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"> 
       <SplineColorKeyFrame KeyTime="0" Value="#3FFFFFFF"/> 
      </ColorAnimationUsingKeyFrames> 
      </Storyboard> 
     </VisualState> 
     <VisualState x:Name="Disabled"> 
      <Storyboard> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity"> 
       <SplineDoubleKeyFrame KeyTime="0" Value=".55"/> 
      </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
     </VisualState> 
     </VisualStateGroup> 
     <VisualStateGroup x:Name="FocusStates"> 
     <VisualState x:Name="Focused"> 
      <Storyboard> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity"> 
       <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
      </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
     </VisualState> 
     <VisualState x:Name="Unfocused"/> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Border 
     x:Name="Background" 
     Background="White" 
     BorderBrush="{TemplateBinding BorderBrush}" 
     BorderThickness="{TemplateBinding BorderThickness}" 
     CornerRadius="3"> 
     <Grid Margin="1" Background="{TemplateBinding Background}"> 
     <Border x:Name="BackgroundAnimation" Opacity="0" Background="#FF448DCA"/> 
     <Rectangle x:Name="BackgroundGradient"> 
      <Rectangle.Fill> 
      <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0"> 
       <GradientStop Color="#FFFFFFFF" Offset="0"/> 
       <GradientStop Color="#F9FFFFFF" Offset="0.375"/> 
       <GradientStop Color="#E5FFFFFF" Offset="0.625"/> 
       <GradientStop Color="#C6FFFFFF" Offset="1"/> 
      </LinearGradientBrush> 
      </Rectangle.Fill> 
     </Rectangle> 
     </Grid> 
    </Border> 
    <ContentPresenter 
     x:Name="contentPresenter" 
     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
     Margin="{TemplateBinding Padding}" 
     VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
     Content="{TemplateBinding Content}" 
     ContentTemplate="{TemplateBinding ContentTemplate}"/> 
    <Rectangle 
     x:Name="DisabledVisualElement" 
     Fill="#FFFFFFFF" 
     RadiusX="3" 
     RadiusY="3" 
     IsHitTestVisible="false" 
     Opacity="0"/> 
    <Rectangle 
     x:Name="FocusVisualElement" 
     Stroke="#FF6DBDD1" 
     StrokeThickness="1" 
     RadiusX="2" 
     RadiusY="2" 
     Margin="1" 
     IsHitTestVisible="false" 
     Opacity="0"/> 
    </Grid> 
</ControlTemplate> 

Answer 2

Понижение свойства Opacity кнопки немного может помочь сделать его похожим на отключенный.