XAML/C로 투명 '핫스팟'을 만들려면 어떻게해야합니까?

Question

전 (지난 한 달 동안 배웠 듯이) 완전히 코딩에 익숙하지 않으므로 불쾌한 간단한 질문 인 경우 나에게 책임을 물으십시오. XAML/C#을 사용하여 Windows 8 앱을 작성했습니다. 나는 행동 할 수있는 투명 버튼을 페이지에 만들고 싶습니다. 당신이 궁금해하는 경우에, 작은 아이가 놀아서 우연히 행동을 발견 할 수 있다는 아이디어가 있습니다. 나는 '핫스팟'이 존재한다는 시각적 인 단서를 원하지 않는다. 나는 투명 버튼을 만들었습니다. 그러나 페이지가로드되면 단추가 일시적으로 회색으로 표시되고 투명으로 변경됩니다. 나는 이것을 연구하는 데 공정한 몫을했지만 행운은 없다. 아무도 그 질문에 귀찮아하지 않은 것은 분명하고 단순한 대답이라고 생각합니다 :) 어떤 제안이라도 환영 할 것입니다! 감사!

<!-- Back button and page title --> 
    <Grid x:Name="LandingPage1"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/> 
     <TextBlock x:Name="pageTitle" Grid.Column="1" Style="{StaticResource PageHeaderTextStyle}"> 
      <Run Text="talk to "/> 
      <Run Foreground="#FF0770A2" Text="me"/> 
     </TextBlock> 
    </Grid> 
    <StackPanel HorizontalAlignment="Left" Height="526" VerticalAlignment="Top" Width="607" Margin="73,31,0,0" Grid.Row="1"> 
     <Image Height="382" Source="Assets/TTMBabyCrying.jpg" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="38,0,10,0"/> 
     <Image x:Name="btnNeedPageNav" Height="150" Source="Assets/TMMneed.png" HorizontalAlignment="Center" VerticalAlignment="Bottom" PointerPressed="btnNeedPageNav_PointerPressed"/> 
    </StackPanel> 
    <StackPanel Height="526" Margin="715,31,0,0" Grid.Row="1" Width="607" HorizontalAlignment="Left" VerticalAlignment="Top"> 
     <Image Height="379" Margin="0" Source="Assets/TTMBoyBall.jpg" Stretch="Fill" VerticalAlignment="Center" Width="474" HorizontalAlignment="Left"/> 
     <Image x:Name="btnWantPageNav" Height="150" Margin="0" Source="Assets/TTMwant.png" Stretch="Fill" Width="320" HorizontalAlignment="Center" VerticalAlignment="Bottom" PointerPressed="btnWantPageNav_PointerPressed"/> 
    </StackPanel> 
    <Button x:Name="btnBabyCrying" Content="" HorizontalAlignment="Left" Margin="329,127,0,0" Grid.Row="1" VerticalAlignment="Top" Height="116" Width="121" PointerPressed="btnBabyCrying_PointerPressed" Click="btnBabyCrying_Click" DragOver="btnBabyCrying_DragOver" Holding="btnBabyCrying_Holding" Opacity="0.0"/> 
    <Button x:Name="btnNeedPageNav1" Content="" HorizontalAlignment="Left" Margin="30,261,0,0" Grid.Row="1" VerticalAlignment="Top" Height="357" Width="650" ClickMode="Press" Click="btnNeedPageNav1_Click" Opacity="0"/> 
    <Button x:Name="btnWantPageNav1" Content="" HorizontalAlignment="Left" Margin="715,410,0,0" Grid.Row="1" VerticalAlignment="Top" Height="208" Width="641" Opacity="0.0"/> 
    <Ellipse x:Name="BlueBall" Fill="#FF5AA2D8" HorizontalAlignment="Left" Height="150" Stroke="#FF5AA2D8" VerticalAlignment="Top" Width="150" Margin="878,261,0,0" Grid.Row="1" Opacity="0.7" RenderTransformOrigin="0.5,0.5" PointerPressed="BlueBall_PointerPressed"> 
     <Ellipse.RenderTransform> 
      <CompositeTransform/> 
     </Ellipse.RenderTransform> 
    </Ellipse> 

Answer 1

깔끔한 프로젝트처럼 들립니다. 이 작업에는 여러 가지 방법이 있습니다. 내 제안은 기본 버튼 스타일 템플릿을 가져 와서 사용자의 요구에 맞도록 정육면체로 가져 와서 인스턴스로 호출하는 것이므로 여기에 참조 할 수 있도록 많은 혼란을 남겼습니다. 그것은 아무것도.) 당신의 setter를 주목하라, 내가 가시성에 ContentPresenter에 설정 =

<Style x:Key="TransparentButtonStyle" TargetType="Button"> 
     <Setter Property="Background" Value="Transparent" /> 
     <Setter Property="Foreground" Value="Black" /> 
     <Setter Property="FontFamily" Value="{StaticResource ContentFontFamily}" /> 
     <Setter Property="FontSize" Value="{StaticResource ContentFontSize}" /> 
     <Setter Property="HorizontalContentAlignment" Value="Center" /> 
     <Setter Property="VerticalContentAlignment" Value="Center" /> 
     <Setter Property="Padding" Value="3" /> 
     <Setter Property="BorderThickness" Value="1" /> 
     <Setter Property="BorderBrush" Value="Transparent" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid x:Name="grid"> 
         <Grid.RenderTransform> 
          <TransformGroup> 
           <ScaleTransform /> 
           <SkewTransform /> 
           <RotateTransform /> 
           <TranslateTransform /> 
          </TransformGroup> 
         </Grid.RenderTransform> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"/> 
           <VisualState x:Name="Normal" /> 
           <VisualState x:Name="MouseOver"/> 
           <VisualState x:Name="Pressed"/> 
           <VisualState x:Name="Disabled"/> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="FocusStates"> 
           <VisualState x:Name="Focused" /> 
           <VisualState x:Name="Unfocused" /> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <!-- In case you need it later --> 
         <ContentControl x:Name="contentPresenter" Visibility="Collapsed" 
             Margin="{TemplateBinding Padding}" 
             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
             VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
             Content="{TemplateBinding Content}" 
             ContentTemplate="{TemplateBinding ContentTemplate}" 
             Foreground="{TemplateBinding Foreground}" /> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

당신은 그 다음 단지에 대한 호출 등 자원 사전, 또는 Object.Resources에서이 템플릿을 배치 할 수 있습니다 "축소" 같은보기에서 필요한 인스턴스;

<Button Style="{StaticResource TransparentButtonStyle}" Height="50" Width="50"/> 

희망이 있으면 도움이되었으므로 설명이 필요하면 재미있게 보내 주시기 바랍니다. :)