Как я могу сделать кнопку Silverlight 2.0 полностью прозрачной?

Question

У меня есть кнопка, которую я использую на панели инструментов с хорошим градиентом. Я хочу, чтобы кнопка была полностью прозрачной, чтобы просто ее содержимое отображалось против градиента. Когда я пытаюсь, кнопка кажется белой, а не прозрачной.

Часть XAML для моей кнопки:

<Button Name="NewAppointmentButton" Style="{StaticResource ToolbarButtonStyle}"> 
    <TextBlock>X</TextBlock> 
</Button> 

и стиль:

<Style x:Key="ToolbarButtonStyle" TargetType="Button"> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="BorderThickness" Value="0"/> 
    <Setter Property="Height" Value="24"/> 
    <Setter Property="Width" Value="24"/> 
</Style> 

Answer 1

Самый лучший способ, чтобы определить новый шаблон кнопок. Добавление этого на ваш UserControl.Resources тег должен работать:

<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button"> 
     <Grid> 
      <vsm:VisualStateManager.VisualStateGroups> 
       <vsm:VisualStateGroup x:Name="CommonStates"> 
        <vsm:VisualState x:Name="Normal"/> 
        <vsm:VisualState x:Name="MouseOver"> 
         <Storyboard/> 
        </vsm:VisualState> 
        <vsm:VisualState x:Name="Pressed"> 
         <Storyboard/> 
        </vsm:VisualState> 
        <vsm:VisualState x:Name="Disabled"> 
         <Storyboard> 
          <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity"> 
           <SplineDoubleKeyFrame KeyTime="0" Value=".55"/> 
          </DoubleAnimationUsingKeyFrames> 
         </Storyboard> 
        </vsm:VisualState> 
       </vsm:VisualStateGroup> 
       <vsm:VisualStateGroup x:Name="FocusStates"> 
        <vsm:VisualState x:Name="Focused"> 
         <Storyboard> 
          <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity"> 
           <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
          </DoubleAnimationUsingKeyFrames> 
         </Storyboard> 
        </vsm:VisualState> 
        <vsm:VisualState x:Name="Unfocused" /> 
       </vsm:VisualStateGroup> 
      </vsm:VisualStateManager.VisualStateGroups> 
      <ContentPresenter 
       x:Name="contentPresenter" 
       Content="{TemplateBinding Content}" 
       ContentTemplate="{TemplateBinding ContentTemplate}" 
       VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
       Margin="{TemplateBinding Padding}"/> 
      <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" /> 
      <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" /> 
     </Grid> 
    </ControlTemplate> 

Теперь ваша кнопка должна быть определена как:

<Button x:Name="NewAppointmentButton" Template="{StaticResource ButtonControlTemplate1}"> 
    <TextBlock>X</TextBlock> 
</Button> 

Если вы используете Expression Blend вы можете использовать его для редактирования шаблона кнопку для содержание вашего сердца :) Выберите свою кнопку в дизайне - чуть выше окна дизайна будет серая кнопка «NewAppointmentButton». Нажмите на нее, затем «Изменить элементы управления», затем «Редактировать шаблон» - кнопка должна получить желтый контур. Теперь вы можете редактировать визуальные элементы, состояния и переходы.

Удачи вам!

Answer 2

Если вы хотите прозрачную кнопку с отображаемым текстом, почему бы вам просто не использовать границу, если, конечно, вы не пользуетесь состояниями кнопки.

Вы можете просто добавить рамку, добавить свой контент, установить фон на границе ни к чему, и bada boom, bada bing. Одна заметка, скорее, вам нужно будет прослушивать прослушиватель событий для события MouseLeftButtonDown, а не события Click. это намного проще, чем обход с шаблонами управления и т. д.

Answer 3

Я согласен с @BigDubb - я думаю, что это самый простой способ.

<Border MouseLeftButtonDown="bla_Click" BorderThickness="0" Cursor="Hand"> 
    ...content here... 
</Border> 

Дополнительное Курсор свойство обеспечивает визуальную индикацию, что область является интерактивной, который иногда не ясно из содержания границы.