2014-11-20 2 views
0

WPF를 배우려고 노력 중이며 간단한 Tic Tac Toe 응용 프로그램을 만들었습니다. 응용 프로그램이 작동하지만 조금 스타일을 지정하려고합니다. 모든 버튼에 대해 비활성화 된 버튼 배경을 설정하는 방법을 알 수 없습니다 (내용을 계속 볼 수 있음). 내 질문은 리소스 사전에 코드를 설정하는 방법입니까? 주석 처리 된 코드는 제가 시도한 것입니다. 모든 버튼에 같은 ​​스타일을주기 위해 나는 리소스 사전을 추가했다. WPF가 비활성화 된 버튼의 배경을 변경합니다.

당신이 찾고있는 것보다 자원 사전

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 

    <Style TargetType="Button"> 
     <Style.Triggers> 
      <Trigger Property="IsEnabled" Value="false"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate> 
          <!--<Border BorderBrush="Black" BorderThickness="1"> 
           <TextBlock Text="{Binding Path=SelectedDate, 
           StringFormat={}{0:d}, 
           RelativeSource={RelativeSource TemplatedParent}}" 
           VerticalAlignment="Center" HorizontalAlignment="Left" 
           Padding="4,0,0,0" /> 
          </Border>--> 
          <!--<Border BorderBrush="Aquamarine" BorderThickness="1"></Border>--> 
          <!-- Outer Rectangle with rounded corners. --> 
          <!-- Present Content (text) of the button. -->       
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

</ResourceDictionary> 

App.xaml

<Application x:Class="FirstApplication.App" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      StartupUri="MainWindow.xaml"> 
    <Application.Resources> 
      <ResourceDictionary Source="ResourceDictionary.xaml" /> 
    </Application.Resources> 
</Application> 

MainWindow.xaml

<Window x:Class="FirstApplication.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="500" Width="525"> 

    <Grid Margin="0,0,0.4,-19.2" Name="controlGrid"> 
     <Button x:Name="A" Content="" HorizontalAlignment="Left" Margin="117,59,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="B" Content="" HorizontalAlignment="Left" Margin="223,59,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="C" Content="" HorizontalAlignment="Left" Margin="330,59,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="D" Content="" HorizontalAlignment="Left" Margin="117,157,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" RenderTransformOrigin="0.302,0.614" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="E" Content="" HorizontalAlignment="Left" Margin="223,157,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="F" Content="" HorizontalAlignment="Left" Margin="330,157,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="G" Content="" HorizontalAlignment="Left" Margin="117,255,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="H" Content="" HorizontalAlignment="Left" Margin="223,255,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="I" Content="" HorizontalAlignment="Left" Margin="330,255,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <ToolBar Margin="0,0,0,450.6"> 
      <Button Name="newButton" Click="newButton_Click">New</Button> 
     </ToolBar> 
    </Grid> 
</Window> 
+0

단어 나 이미지를 사용하여 자신이 작성한 코드 (본인이 언급 한 주석 코드)를 사용하는 것 외에 다른 것을 원하는대로 표현하십시오. (현재 요구하고 있으므로). –

+0

나는 내 노력을 보여주기 위해 내 코드를 보여줍니다. 하지만 간단히 말해서 리소스 사전에있는 모든 비활성화 된 버튼에 대해 동일한 배경색을 설정하는 것입니다. – Sybren

+0

'IsEnabled'가'false' 일 때'Template'을 변경하는 것은 과도한 일이지만 효과적입니다. 당신은 작업 코드에 매우 가깝지만, 주석 처리 된 코드에 대해 혼란 스럽습니다. 주석 처리하지 않으면 코드가 컴파일되지 않습니다. –

답변

0

아마 더 :

<Style TargetType="{x:Type Button}" x:Key="ButtonBase"> 
    <Setter Property="BorderThickness" Value="1" /> 
    <Setter Property="Foreground" Value="#FF959595" /> 
    <Setter Property="HorizontalContentAlignment" Value="Center" /> 
    <Setter Property="VerticalContentAlignment" Value="Center" /> 
    <Setter Property="Padding" Value="10,0" /> 
    <Setter Property="Margin" Value="2" /> 
    <Setter Property="FontFamily" Value="Segoe UI" /> 
    <Setter Property="Height" Value="25" /> 
    <Setter Property="MinWidth" Value="100" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"> 
           <Storyboard> 
            <ColorAnimation To="#FFFFFFFF" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" 
                Duration="0:0:0.07" /> 
            <ColorAnimation To="#FFDEDEDE" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" 
                Duration="0:0:0.07" /> 
            <ColorAnimation To="#FF959595" Storyboard.TargetName="BrBrush" 
                Storyboard.TargetProperty="Color" Duration="0:0:0.07" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <ColorAnimation To="#FF00B4E4" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" 
                Duration="0:0:0.07" /> 
            <ColorAnimation To="#FF0083C3" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" 
                Duration="0:0:0.07" /> 
            <ColorAnimation To="#FF4C7B8F" Storyboard.TargetName="BrBrush" 
                Storyboard.TargetProperty="Color" Duration="0:0:0.07" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ColorAnimation To="#DBEDFD" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" 
                Duration="0:0:0.05" /> 
            <ColorAnimation To="#C4E0FC" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" 
                Duration="0:0:0.05" /> 
            <ColorAnimation To="#4C7B8F" Storyboard.TargetName="BrBrush" 
                Storyboard.TargetProperty="Color" Duration="0:0:0.05" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ColorAnimation To="#EFEFEF" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" 
                Duration="0:0:0" /> 
            <ColorAnimation To="#EFEFEF" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" 
                Duration="0:0:0" /> 
            <ColorAnimation To="#D9D9D9" Storyboard.TargetName="BrBrush" 
                Storyboard.TargetProperty="Color" Duration="0:0:0" /> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Border x:Name="Chrome" BorderThickness="{TemplateBinding BorderThickness}" 
          SnapsToDevicePixels="true"> 
         <Border.BorderBrush> 
          <SolidColorBrush x:Name="BrBrush" Color="#ACACAC" /> 
         </Border.BorderBrush> 
         <Border.Background> 
          <LinearGradientBrush x:Name="BgBrush" EndPoint="0,1" StartPoint="0,0"> 
           <GradientStop Color="#FFF0F0F0" Offset="0" /> 
           <GradientStop Color="#FFE5E5E5" Offset="1" /> 
          </LinearGradientBrush> 
         </Border.Background> 
         <ContentPresenter 
          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
          Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" 
          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="true"> 
         <Setter Property="Foreground" Value="#FFFFFF" /> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Foreground" Value="#ADADAD" /> 
        </Trigger> 
        <Trigger Property="IsPressed" Value="true"> 
         <Setter Property="Foreground" Value="#000000" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
왕이 왕 의견/피드백을 기반으로 3,691,363,210

편집

위의 예는 질문의 맥락과 Button 제어 State 스타일에 대한 관심을 고려하지만, 영업 이익은 요구 된 것보다 확실히 더, 나는 그것을 느꼈다 (비록 설명이 없더라도) 추가적인 세부 사항을 제공하는 것이 유리하다.

<Setter Property="Tempalte"> 전에는 Button 컨트롤의 기본 비주얼 스타일을 변경했습니다. 나는 이것이 공정하게 자명 해 보이는 것처럼 설명 할 것을 요구하지 않기를 바란다.

포스트 <Setter Property="Template"> 나는 ButtonControlTemplatevisual states을 변경하고 (이되는 Normal, MouseOver, Pressed & Disabled). 이렇게하면 Button의 모양과 느낌을 사용자 정의 할 수 있습니다. 그 중 하나의 상태에 있습니다. 이 예제에서는 StoryBoard을 사용하여 ButtonState 전환을 애니메이션으로 만들 수 있습니다.

네 개의 State은 유사한 형식 (움직이는 그라디언트 배경 & 움직이는 단색 테두리)으로 스타일이 지정되며,이 상태의 차이는 원하는 효과를 제공하기 위해 사용하는 색과 지속 시간입니다.

VisualState 주 콘텐트 템플릿을 변경 한 후 Button 컨트롤을 어떻게 표시 할 것인지 묻습니다. 나는 Button의 내용을 표시하는 데 사용되는 ContentPresenter을 제공하고의 특정 특성을 Button에 바인딩하여이 특성이 Button 단위로 제어되도록 허용합니다. ContentPresenterBorder으로 둘러싸여 있으며 BrBrush (경계선 브러시) 및 BgBrush (배경 브러시)을 정의합니다. 이들은 VisualStates 템플릿에서 참조되는 것과 동일한 브러시이며이 브러쉬는 작업 할 기본 상태를 제공합니다.

마지막 I는 활성화 TriggerProperty Value에 기초 Button (이 예에서의 전경 색상)의 시각적 스타일을 사용자의 변경 ControlTemplate.Triggers.

+0

나는 당신의 코드를 시도했고 그것은 나를 위해 일한다! – Sybren

+0

너무 복잡합니다. 'ContentPresenter'만으로도 충분할 것입니다. 또한 아무런 설명도없이 이와 같이 응답하므로 (-1) 권장하지 않습니다. 누구나 어디에서나 발견 된 코드를 복사하여 붙여 넣을 수 있습니다. –

+0

@Sybren 다음 번에 적어도 그것에 대해 뭔가를 말하고있는 답변 아래에 몇 가지 의견을 남겨 주시기 바랍니다. 내 코드는 실제로 작동하지만 조금 신경을 써도 신경 쓰지는 않습니다. 이 같은 간단한 설명조차도 '이 역시 효과가 있지만 나는 다른 것을 선호합니다 ...'는 나를 실망시키지 않을 것입니다. –

관련 문제