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 に答える