Деактивиране на бутон с персонализирано съдържание в Silverlight?

Кой е най-лесният начин за създаване на бутон Silverlight с персонализирано съдържание, което знае как да деактивира „изглежда“? т.е. ако зададете IsEnabled="False", ще изглежда сиво.

Персонализираното съдържание ще бъде изключително просто, текст и изображение.

Правил съм това преди в WPF приложение доста лесно, като зададох съдържанието на StackPanel, съдържащ TextBlock и изображение. След това внедрих стилов тригер на изображението, за да го променя в сива версия, когато не е активиран. Текстът промени цвета си сам.

Доколкото мога да кажа, персонализираното съдържание изчезва напълно, когато бутонът е деактивиран в Silverlight.

Всяка помощ се оценява.

Наздраве, Андрей.


button custom-controls visualstatemanager silverlight
person andrej351    schedule 07.04.2010    source източник

Отговори (2)


arrow_upward
3
arrow_downward

Ако приемем, че не сте променили шаблона на бутона, контролният шаблон по подразбиране за бутона използва VisualStateManager за наслагване на бял правоъгълник с 50% прозрачност върху съдържанието, което имате в бутона. Това трябва да придаде на съдържанието „измит“ вид.

Ако сте заменили шаблона, ще трябва да копирате това поведение. Silverlight няма задействания за стил, така че ще трябва да използвате VisualStateManager. Имате ли Expression Blend? Ако е така, можете да видите контролния шаблон по подразбиране, като плъзнете бутон върху дизайнера, щракнете с десния бутон -> редактиране на шаблон -> редактиране на копие.

РЕДАКТИРАНЕ

Включих контролния шаблон по подразбиране за бутона, извлечен от Blend. Обърнете внимание на състоянието Disabled в 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>
person Josh    schedule 07.04.2010
comment
Не съм променил шаблона на бутоните, но нищо не се показва, когато е деактивиран. Имам приложена тема MS BureauBlue, ако това има значение.. - person andrej351; 07.04.2010
comment
О, добре, че със сигурност е заменил шаблона. Всички тези теми са адски бъги според мен. Вероятно ще трябва да промените малко контролния шаблон. - person Josh; 07.04.2010
comment
Да, прав си. Шаблонът BureauBlue скрива ContentPresenter, когато бутонът е деактивиран (бог знае защо). По принцип премахнах цялото му дезактивирано състояние и го замених с това по-горе и работи добре. Нямам смес, така че беше доста удобно. Благодаря ти много! - person andrej351; 07.04.2010
comment
Искам да имам преходите -›Enabled/Enabled-›, за да анимирам съответно свойството Opacity за определен период от време, как може да стане това? - person Shimmy Weitzhandler; 18.02.2011

arrow_upward
1
arrow_downward

Намаляването малко на свойството Opacity на бутона може да помогне да изглежда като деактивиран.

person Hadi Eskandari    schedule 07.04.2010