ideaki's blog

WinRT C#/XAML の開発について

WinRT コードビハインド書かずにWebViewにプログレスバーつける

WebViewがコンテンツをロード中にプログレスバーを出しておくとユーザに親切だったりします。
ただこれ作るのにコードビハインド書かなくちゃいけなくて、めんどうだなあと思ってました。
実はXAMLだけで簡単に書けるみたいです。

<Border>
 <VisualStateManager.VisualStateGroups>
  <VisualStateGroup x:Name="WebViewVisualStateGroup">
   <VisualState x:Name="contentloading">
    <Storyboard>
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="progressBar" Storyboard.TargetProperty="(ProgressBar.IsIndeterminate)">
      <DiscreteObjectKeyFrame KeyTime="0">
       <DiscreteObjectKeyFrame.Value>
        <x:Boolean>True</x:Boolean>
       </DiscreteObjectKeyFrame.Value>
      </DiscreteObjectKeyFrame>
     </ObjectAnimationUsingKeyFrames>
     <FadeInThemeAnimation TargetName="border" />
    </Storyboard>
   </VisualState>
   <VisualState x:Name="contentloaded">
    <Storyboard>
     <FadeOutThemeAnimation TargetName="border" />
    </Storyboard>
   </VisualState>
  </VisualStateGroup>
 </VisualStateManager.VisualStateGroups>
 <Grid>
  <Grid.RowDefinitions>
   <RowDefinition Height="20" />
   <RowDefinition Height="1*" />
  </Grid.RowDefinitions>
  <WebView x:Name="WebViewObj"
     Grid.RowSpan="2"
     Source="{Binding SelectFeedItem.Uri}">
   <Interactivity:Interaction.Behaviors>
    <Core:EventTriggerBehavior EventName="NavigationCompleted">
     <Core:GoToStateAction StateName="contentloaded" />
    </Core:EventTriggerBehavior>
    <Core:EventTriggerBehavior EventName="NavigationStarting">
     <Core:GoToStateAction StateName="contentloading" />
    </Core:EventTriggerBehavior>
    <Core:EventTriggerBehavior EventName="NavigationFailed">
     <Core:GoToStateAction StateName="contentloaded" />
    </Core:EventTriggerBehavior>
   </Interactivity:Interaction.Behaviors>
  </WebView>
  <Border x:Name="border" Background="#B2F0F8FF">
   <ProgressBar x:Name="progressBar" />
  </Border>
 </Grid>
</Border>

参考になるエントリ

Blend for VS2013 RCにXAMLでのBehavior復活!!(ただしWindows 8.1のみのもよう) - かずきのBlog@hatena

MVVM開発をさらに加速させる ノンコーディングUI開発 - SSSSLIDE