2

我对编码完全陌生（就像过去一个月刚刚学习一样），所以如果这是一个令人讨厌的简单问题，请耐心等待。我正在使用 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>
4

1 回答 1

0

听起来像一个整洁的项目。有多种方法可以做到这一点。我的建议是采用默认的按钮样式模板并根据您的需要对其进行处理，然后将其调用到实例中，所以像这样（请记住，我在这里留下了很多额外的混乱以供参考，或者如果您想添加任何东西。）注意你的设置器，我将 ContentPresenter 设置为 Visibility="Collapsed"

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

希望这会有所帮助，如果您需要任何解释，请告诉我们，玩得开心！:)

于 2012-11-15T22:56:46.990 回答