2009-03-23 4 views
4

멋진 그라디언트가있는 툴바에서 사용하는 버튼이 있습니다. 단추가 완전히 투명하여 내용이 그라디언트에 대해 표시되도록하고 싶습니다. 시도 할 때 단추가 투명하지 않고 흰색으로 표시됩니다. 내 버튼Silverlight 2.0 단추를 완전히 투명하게 만들려면 어떻게해야합니까?

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> 

답변

5

가장 좋은 방법은 새 버튼 템플릿을 정의하는 것입니다. 당신의 UserControl.Resources 태그에 이것을 추가하면 작동합니다 : 당신이 표현 혼합을 사용하는 경우

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

은 당신이 당신의 버튼 템플릿을 편집하는 데 사용할 수 있습니다 :

<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> 

이제 버튼은 다음과 같이 정의한다 당신의 마음의 내용 :) 디자인보기에서 단추를 선택하십시오 - 디자인 창 바로 위에는 'NewAppointmentButton'이라는 회색 단추가 생깁니다. 그것을 클릭 한 다음 '컨트롤 파트 편집'을 클릭하고 '템플릿 편집'을 클릭하면 버튼이 노란색 윤곽선으로 표시됩니다. 이제 시각적 요소와 상태 및 전환을 편집 할 수 있습니다.

행운을 빈다.

+0

감사합니다. "vsm"에 대한 언급이 많습니다. 어떤 네임 스페이스가 필요합니까? (빨간 squigglies의 순간에!) –

+1

아, 미안 해요! xmlns를 추가하십시오 : vsm = "clr-namespace : System.Windows; assembly = System.Windows" –

+0

그건 훌륭한 작품입니다! 한 가지 - 내 스타일 ()에서 템플릿을 설정하려고했는데 ToolbarButtonTemplate이라는 리소스가 없다는 오류가 발생했습니다. . 왜 그런지 알아? –

0

텍스트가있는 투명 버튼을 표시하려면 물론 버튼의 상태를 이용하는 경우가 아니면 테두리를 사용하지 않는 것이 좋습니다.

테두리를 추가하고 내용을 추가하고 테두리의 배경을 아무 것도 설정하지 않고 bada boom, bada bing 만 설정할 수 있습니다. 한 가지 메모가 아니라 이벤트 수신기가 Click 이벤트가 아닌 MouseLeftButtonDown 이벤트를 수신하도록해야합니다. 이것은 제어 템플릿 등으로 주변을 둘러 보는 것보다 훨씬 쉽습니다.

1

나는 이것이 @BigDubb에 동의합니다. 이것이 가장 쉬운 방법이라고 생각합니다.

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

옵션 커서 속성은 때때로 국경의 내용에서 명확하지 않은 영역이 클릭 할 수 있다는 시각적 표시를 제공합니다.

관련 문제