読者です 読者をやめる 読者になる 読者になる

がりらぼ

WindowsRuntimeの応援ブログ

フォーカスが外れても消えないFlyoutを作る

WindowsRuntime XAML

フライアウトはPageより上のレイヤに表示することができる表示非表示が簡単なコントロールでフォーカスが外れると基本的に消えるのが通常です。

f:id:garicchi:20140816210254p:plain

実際にSettingsFlyoutもほかの場所をタップすると消えます。

それを消えないようにするためにはPopupコントロールを作ってIsLightDismissEnabledをfalseにするとフォーカスが外れても消えません。

IsOpenプロパティで任意のタイミングで消すことができます。

こんな感じでpopupを作って、IsLightDismissEnabledをfalseにします。

<Grid>

    <Popup x:Name="popUp" IsLightDismissEnabled="False">
        <Grid Background="Blue" Width="300" Height="300">
             <TextBlock Text="ほげほげ" FontSize="20" />
        </Grid>
    </Popup>
    <Button Content="Button" HorizontalAlignment="Left" Margin="102,55,0,0" VerticalAlignment="Top" Click="Button_Click_1"/>
</Grid>

ボタンクリック時にIsOpenをtrueにすれば

private void Button_Click_1(object sender, RoutedEventArgs e)
{
  
    popUp.IsOpen = true;
}

消えないFlyoutができます。

f:id:garicchi:20140816210542p:plain

ほかにもこんな感じのユーザーコントロールを作って

<UserControl
    x:Class="FlyoutSample.HogeControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlyoutSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    
    <Grid Background="#FF4AC593" Width="300" Height="200">
        <TextBlock FontSize="28" Text="{Binding Text,UpdateSourceTrigger=PropertyChanged}" />
    </Grid>
</UserControl>

ViewModelも作る

public class ViewModel:INotifyPropertyChanged
{
    string text;

    public string Text
    {
        get { return text; }
        set { text = value; OnPropertyChanged("Text"); }
    }
    public ViewModel()
    {

    }

    public void OnPropertyChanged(string name)
    {
        if (PropertyChanged != null)
            PropertyChanged(this,new PropertyChangedEventArgs(name));
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

Popupを作ってPageのコントロールと同一プロパティとバインドさせれば

<Page
    x:Class="FlyoutSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlyoutSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    >
    <Page.DataContext>
        <local:ViewModel></local:ViewModel>
    </Page.DataContext>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="btn" Content="Button" HorizontalAlignment="Left" Margin="513,288,0,0" VerticalAlignment="Top" Click="btn_Click"/>
        <TextBox Text="{Binding Text,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}" Width="136" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="342,291,0,0"/>
        <Popup x:Name="popup" Width="300" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,200,0,0" IsLightDismissEnabled="False">
            <local:HogeControl></local:HogeControl>
        </Popup>
    </Grid>
</Page>

private void btn_Click(object sender, RoutedEventArgs e)
{
    
    
    popup.IsOpen = true;
}

入力に合わせた挙動をするFlyoutをつくれたりします。

f:id:garicchi:20140816211042p:plain