none
メイン画面からユーザーコントロール内のボタンを拾う RRS feed

  • 質問

  • メイン画面にUserControlで作った画面を表示していて、そのUserControl内にあるボタンを
    クリックしたらこのコントロールの非表示とメイン画面の一部のGridが非表示になるというのがやりたいことです。

    UserControlの非表示は出来ましたが、メイン側のGrid非表示ができません。

     public MainPage()
            {
                this.InitializeComponent();
           UserControl名 close = this.FindName("close_btn") as UserControl名;
                close.Tapped += close_Tapped;
             }

            void close_Tapped(object sender, TappedRoutedEventArgs e)
            {
                this.grid1.Visibility = Visibility.Collapsed;
            }

    メイン側でコントロール内のボタンのX:Nameを拾ってくるイメージだと思うのですが分かりません。
    よろしくお願いします。

    2016年1月20日 1:30

回答

  • 方法1
    ユーザーコントロールのVisibilityを消したいGridのVisibilityにバインドする

    <Grid Background="White">
        <Grid x:Name="grid1" Grid.RowSpan="2" Margin="0,80,0,0" Background="Black" Opacity="0.8"
                Visibility="{Binding Path=Visibility,ElementName=hamburger}" />
    
        <local:hamburger x:Name="hamburger" Grid.RowSpan="2" Margin="80,80,0,0" Width="325" Height="Auto" 
                    RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Visibility="Visible">
            <local:hamburger.RenderTransform>
                <CompositeTransform/>
            </local:hamburger.RenderTransform>
        </local:hamburger>
    </Grid>

    方法2
    配置した画面側で消させる

    public sealed partial class hamburger : UserControl
    {
        public hamburger()
        {
            this.InitializeComponent();
        }
    
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            //this.Visibility = Visibility.Collapsed;//ユーザーコントロールでは消さない
        }
    }
    <!-- メイン画面 -->
    <Grid Background="White">
        <Grid x:Name="grid1" Grid.RowSpan="2" Margin="0,80,0,0" Background="Black" Opacity="0.8"
                Visibility="{Binding Path=Visibility,ElementName=hamburger}" />
        <local:hamburger x:Name="hamburger" Grid.RowSpan="2" Margin="80,80,0,0" Width="325" Height="Auto" 
                    RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Visibility="Visible"
                    Tapped="hamburger_Tapped">
            <local:hamburger.RenderTransform>
                <CompositeTransform/>
            </local:hamburger.RenderTransform>
        </local:hamburger>
    </Grid>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
    
        private void hamburger_Tapped(object sender, TappedRoutedEventArgs e)
        {
            UserControl uc = (UserControl)sender;
            DependencyObject d = e.OriginalSource as DependencyObject;
            while (d != sender && d != null)
            {
                if (d is Button)
                {
                    Button btn = (Button)d;
                    if (btn.Name == "close_btn")
                    {
                        this.grid1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
                        uc.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
    
                        e.Handled = true;
                        break;
                    }
                }
                d = VisualTreeHelper.GetParent(d);
    
            }
        }
    }

    個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

    • 回答としてマーク EM110 2016年1月20日 4:38
    2016年1月20日 3:41

すべての返信

  • こんにちは。

    close_btnはButtonではなく、ユーザーコントロールなのですか?
    MainPageとUserControl側のXAMLも提示できますか。

    また、UserControlの非表示が何故できているのかも、コード提示が部分的すぎてわかりません。

    <追記>
    実装の方法は色々あると思うのですが、もっとも単純な取得方法は
    ユーザーコントロールにnameをつけて、そこからFindNameするのが簡単ではないでしょうか。

    var btn = uc.FindName("btnHoge") as Button;


    2016年1月20日 1:49
    モデレータ
  • Tak1waさん

    すいません、説明不足で。

    UserControlを呼んだ時、画面を覆っているGridとその上のUserControlがある状態です。
    このコントロールを閉じるときに一緒に下のGridも消したいのです。

    close_btnはUserControl内のボタンのx:Nameです。


    [UserControl]

    <Button x:Name="close_btn" Content="Button" Grid.Column="2" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Width="30" Height="30" BorderThickness="0" Style="{StaticResource hamburger_close_btn}" Click="Button_Click"/>

      public hamburger()
            {
                this.InitializeComponent();
            }

            private void Button_Click(object sender, RoutedEventArgs e)
            {
                this.Visibility = Visibility.Collapsed;
            }

    [Main]

    <Grid x:Name="grid1" Grid.RowSpan="2" Margin="0,80,0,0" Background="Black" Opacity="0.8" Visibility="Collapsed"/>
    <local:hamburger x:Name="hamburger" Grid.RowSpan="2" Margin="-80,80,0,0" Width="325" Height="Auto" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Visibility="Collapsed">
    <local:hamburger.RenderTransform>
    <CompositeTransform/>
    </local:hamburger.RenderTransform>
    </local:hamburger>


    よろしくお願いします。

    • 編集済み EM110 2016年1月20日 3:00
    2016年1月20日 2:51
  • 方法1
    ユーザーコントロールのVisibilityを消したいGridのVisibilityにバインドする

    <Grid Background="White">
        <Grid x:Name="grid1" Grid.RowSpan="2" Margin="0,80,0,0" Background="Black" Opacity="0.8"
                Visibility="{Binding Path=Visibility,ElementName=hamburger}" />
    
        <local:hamburger x:Name="hamburger" Grid.RowSpan="2" Margin="80,80,0,0" Width="325" Height="Auto" 
                    RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Visibility="Visible">
            <local:hamburger.RenderTransform>
                <CompositeTransform/>
            </local:hamburger.RenderTransform>
        </local:hamburger>
    </Grid>

    方法2
    配置した画面側で消させる

    public sealed partial class hamburger : UserControl
    {
        public hamburger()
        {
            this.InitializeComponent();
        }
    
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            //this.Visibility = Visibility.Collapsed;//ユーザーコントロールでは消さない
        }
    }
    <!-- メイン画面 -->
    <Grid Background="White">
        <Grid x:Name="grid1" Grid.RowSpan="2" Margin="0,80,0,0" Background="Black" Opacity="0.8"
                Visibility="{Binding Path=Visibility,ElementName=hamburger}" />
        <local:hamburger x:Name="hamburger" Grid.RowSpan="2" Margin="80,80,0,0" Width="325" Height="Auto" 
                    RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Visibility="Visible"
                    Tapped="hamburger_Tapped">
            <local:hamburger.RenderTransform>
                <CompositeTransform/>
            </local:hamburger.RenderTransform>
        </local:hamburger>
    </Grid>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
    
        private void hamburger_Tapped(object sender, TappedRoutedEventArgs e)
        {
            UserControl uc = (UserControl)sender;
            DependencyObject d = e.OriginalSource as DependencyObject;
            while (d != sender && d != null)
            {
                if (d is Button)
                {
                    Button btn = (Button)d;
                    if (btn.Name == "close_btn")
                    {
                        this.grid1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
                        uc.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
    
                        e.Handled = true;
                        break;
                    }
                }
                d = VisualTreeHelper.GetParent(d);
    
            }
        }
    }

    個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

    • 回答としてマーク EM110 2016年1月20日 4:38
    2016年1月20日 3:41
  • gekkaさん

    方法1で出来ました!ありがとうございます。
    非表示でバインド使うとは全く気づきませんでした。勉強になりました!

    2016年1月20日 4:36