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设置为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"/>

希望这有帮助，如果您需要任何解释，请告诉我们，并享受乐趣！：）

如何使用XAML / C创建透明的“热点”＃

1 个答案: