Hatena::ブログ(Diary)

Yuya Yamaki’s blog このページをアンテナに追加 RSSフィード

2012年07月10日(火曜日)

XAMLのMetroスタイルアプリでサポートされるテーマ(Windows 8 RP時点)

 Windows Phone 7では、「アクセントカラーのテーマ」と「背景のテーマ」という2つのテーマを持っています。


アクセントカラーまたは背景のテーマの変更 | Windows Phoneのテーマ | アクセントカラーの変更 | Windows Phone 7


 このテーマはシステム側の設定であるため、アプリケーション側で変更することはできません(現在どのテーマが設定されているかを確認することはできます)。


 Windows 8XAMLのMetroスタイルアプリケーションでは、システム側ではなくアプリケーション側でWindows Phone 7でいうところの「背景のテーマ」を持っています。これはApplicationクラスのRequestedThemeプロパティで設定、取得することができます。


Application Class (Windows.UI.Xaml) - UWP app developer | Microsoft Docs


 RequestedThemeプロパティの設定値はDarkとLightの2種類で、規定値はDarkのようです(ちなみに現時点の翻訳だと濃色と淡色と表現されています)。また、このプロパティはアプリケーションの実行時に変更することはできません。App.xamlにXAMLで設定するか、Applicationクラスのコンストラクタで設定する必要があります。


 Windows Phone 7の「背景のテーマ」同様、このRequestedThemeプロパティを変更すると以前CP時点で本blogでも紹介したいわゆるテーマリソースの設定値が変更されます。


 実際に「C:\Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design\themeresources.xaml」を見てみると分かりますが、このテーマによってリソースを切り替えるという仕組みは、一般の開発者でも利用することができます。ResourceDictionaryクラスにThemeDictionariesプロパティが用意されているので、ここにキーをDarkやLightとしてリソースを設定してあげることで、そのテーマが設定されたときに自動的にリソースが適用されます。


ResourceDictionary Class (Windows.UI.Xaml) - UWP app developer | Microsoft Docs


 なお、デスクトップの「コントロールパネル\デスクトップのカスタマイズ\個人設定」でハイコントラスト系のテーマを設定した場合、RequestedThemeプロパティの値に関わらずHighContrastというキーのテーマリソースが適用されるようです。テーマリソースのキーの名称としては、今のところ以下の4つを確認しています。


  • Default
  • Dark
  • Light
  • HighContrast


2012年04月04日(水曜日)

XAML版Metroスタイルアプリにおける「Windows Phoneのテーマリソース」的なもの

 Windows Phoneではテーマリソースという呼び名で、統一的な外観を構築するのに役立つブラシやフォントサイズなどがリソースディクショナリとして用意されています。


Windows Phone のテーマ リソース


 XAML版のMetroスタイルアプリでも、Visual StudioExpression Blendのプロパティウィンドウ部分でこれに相当するリソースを確認することができるのですが、一覧表示されているドキュメントはまだ存在しません。


f:id:Yamaki:20120404163856p:image


 しかしながら、以下のフォルダにある「themeresources.xaml」で一覧を確認することができす。


C:\Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design


 Consumer Preview時点の暫定的な情報になりますが、テーマリソースのDefault(Darkテーマ?)におけるブラシ部分だけを下記に掲載しておきます。


AppBarFillBrush #E5000000
AppBarItemBackgroundBrush Transparent
AppBarItemDisabledForegroundBrush #66FFFFFF
AppBarItemForegroundBrush #FFFFFFFF
AppBarItemHoverBackgroundBrush #21FFFFFF
AppBarItemHoverForegroundBrush #FFFFFFFF
AppBarItemPressedForegroundBrush #FF000000
ApplicationHoverTextBrush #FFFFFFFF
ApplicationPageBackgroundBrush #FF1D1D1D
ApplicationPressedTextBrush #FF5AB7E3
ApplicationSecondaryTextBrush #99FFFFFF
ApplicationTextBrush #DEFFFFFF
BackButtonBackgroundBrush Transparent
BackButtonDisabledGlyphBrush #66FFFFFF
BackButtonGlyphBrush #FFFFFFFF
BackButtonHoverBackgroundBrush #21FFFFFF
BackButtonHoverGlyphBrush #FFFFFFFF
BackButtonPressedGlyphBrush #FF000000
ButtonBackgroundBrush Transparent
ComboBoxDisabledBorderBrush #66FFFFFF
ComboBoxFocusedTextBrush White
ComboBoxHighlightBackgroundBrush White
ComboBoxHighlightFillBrush #FF008287
ComboBoxHighlightHoverFillBrush #FF219297
ComboBoxItemHighlightFillBrush #FF008287
ComboBoxItemHighlightHoverFillBrush #FF219297
ComboBoxItemPointerOverFillBrush #21000000
ComboBoxItemPressedFillBrush #FF000000
ComboBoxPointerOverBorderBrush #DEFFFFFF
ComboBoxPointerOverFillBrush #DEFFFFFF
ComboBoxNormalBackgroundBrush #CCFFFFFF
ComboBoxNormalBorderBrush #CCFFFFFF
ComboBoxPopupBackgroundBrush #FFFFFFFF
ComboBoxPopupBorderBrush #FF212121
ComboBoxPopupTextBrush #FF000000
ComboBoxPressedBorderBrush #FFFFFFFF
ComboBoxPressedFillBrush #FFFFFFFF
ComboBoxPressedTextBrush #FF000000
ControlBorderBrush #FFFFFFFF
ControlDisabledBrush #66FFFFFF
ControlDisabledFillBrush Transparent
ControlDisabledTextBrush #66FFFFFF
ControlForegroundBrush #FFFFFFFF
ControlGlyphBrush #FF000000
ControlGlyphPressedBrush #FF000000
ControlHeaderBrush #CCFFFFFF
ControlHighlightBrush #FF008287
ControlPointerOverFillBrush #21FFFFFF
ControlPointerOverStrokeBrush White
ControlNormalFillBrush White
ControlNormalStrokeBrush #FFFFFFFF
ControlPressedFillBrush #FF212121
ControlPressedTextBrush #FF000000
ControlTransparentntFillBrush Transparent
DefaultTextBrush White
DisabledTransparentntOutlineBrush Transparent
FocusVisualBlackStrokeBrush Black
FocusVisualWhiteStrokeBrush White
HyperlinkDisabledBrush #66FFFFFF
HyperlinkPointerOverBrush #FF42D2DA
HyperlinkPressedTextBrush #FF52EEFF
HyperlinkRestColorBrush#FF00B7C0
InputControlDisabledFillBrush #66FFFFFF
InputControlDisabledGlyphBrush #66000000
InputControlGlyphBrush #FF000000
InputControlPointerOverFillBrush #DEFFFFFF
InputControlPointerOverStrokeBrush #DEFFFFFF
InputControlNormalFillBrush #CCFFFFFF
InputControlPressedFillBrush #FFFFFFFF
InputControlStrokeBrush #CCFFFFFF
InputControlTextBrush #FF000000
ListBoxItemHighlightFillBrush #FF008287
ListBoxItemHighlightHoverFillBrush #FF219297
ListBoxItemPointerOverFillBrush #21000000
ListBoxItemPressedFillBrush #FF000000
ListBoxItemPressedForegroundBrush #FFFFFFFF
ListBoxNormalBorderBrush Transparent
ListBoxNormalFillBrush #CCFFFFFF
ListBoxFocusFillBrush #FFFFFFFF
ListViewItemCheckGlyphBrush #FFFFFFFF
ListViewItemCheckHintGlyphBrush #80008287
ListViewItemDragBackgroundBrush #99008287
ListViewItemHighlightBrush #FF008287
ListViewItemKeyboardFocusBrush #FFFFFFFF
ListViewItemPointerOverBrush #4DFFFFFF
ListViewItemOverlayBackgroundBrush #A6000000
ListViewItemOverlaySecondaryTextBrush #99FFFFFF
ListViewItemOverlayTextBrush #FFFFFFFF
ListViewItemPlaceholderRectBrush #FF3D3D3D
ListViewItemSelectedPointerOverBorderBrush #FF219297
ListViewItemSelectedPointerOverBrush #FF219297
ListViewItemSemiTransparentntHighlightBrush #99008287
ListViewItemVeryTransparentntHighlightBrush #7F26A0DA
MediaPlayerControlPanelBrush #A3000000
MediaPlayerDownloadProgressIndicatorBrush #FF008287
MediaPlayerErrorPanelBrush #FF000000
MediaPlayerTextBrush #FFFFFFFF
MediaPlayerVolumePanelBrush #A3000000
MouseScrollBarShadowBrush #7D9A9A9A
ProgressBarBorderBrush Transparent
ProgressBarFillBrush #FF008287
ProgressBarTrackBrush #59FFFFFF
ScrollBarButtonPointerOverBorderBrush #6BB7B7B7
ScrollBarButtonPointerOverFillBrush #E5D7D7D7
ScrollBarButtonPressedBorderBrush #9A000000
ScrollBarButtonPressedFillBrush #9A000000
ScrollBarFaceBrush #EBC9C9C9
ScrollBarGlyphArrowBrush #99000000
ScrollBarGlyphArrowPointerOverBrush #99000000
ScrollBarGlyphArrowPressedBrush #FFFFFFFF
ScrollBarShadowBrush #7D9A9A9A
ScrollBarThumbBorderBrush #3B555555
ScrollBarThumbFillBrush #DEC8C8C8
ScrollBarThumbPointerOverBorderBrush #6BB7B7B7
ScrollBarThumbPointerOverFillBrush #E5D7D7D7
ScrollBarThumbPressedBorderBrush #ED555555
ScrollBarThumbPressedFillBrush #99000000
ScrollBarTrackBrush #59D5D5D5
ScrollBarTrackBorderBrush #59D5D5D5
SliderThumbDisabledBorderBrush #FF7E7E7E
SliderThumbDisabledFillBrush #FF7E7E7E
SliderThumbHoverBorderBrush #FFFFFFFF
SliderThumbHoverFillBrush #FFFFFFFF
SliderThumbNormalBorderBrush #FFFFFFFF
SliderThumbNormalFillBrush #FFFFFFFF
SliderThumbPressedBorderBrush #FFFFFFFF
SliderThumbPressedFillBrush #FFFFFFFF
SliderTickMarkDisabledFillBrush Black
SliderTickMarkNormalFillBrush Black
SliderTrackDecreaseDisabledFillBrush #21FFFFFF
SliderTrackDecreasePointerOverFillBrush #FF219297
SliderTrackDecreaseNormalFillBrush #FF008287
SliderTrackDecreasePressedFillBrush #FF25BBC4
SliderTrackDisabledFillBrush #1FFFFFFF
SliderTrackPointerOverFillBrush #61FFFFFF
SliderTrackNormalFillBrush #59FFFFFF
SliderTrackPressedFillBrush #6EFFFFFF
TextBoxBorderBrush #FFFFFFFF
TextBoxButtonBorderBrush Transparent
TextBoxButtonFillBrush Transparent
TextBoxButtonGlyphBrush #FF000000
TextBoxButtonHoverBorderBrush Transparent
TextBoxButtonHoverFillBrush #FFDEDEDE
TextBoxButtonHoverGlyphBrush #FF000000
TextBoxButtonPressedBorderBrush Transparent
TextBoxButtonPressedFillBrush #FF000000
TextBoxButtonPressedGlyphBrush #FFFFFFFF
TextBoxDisabledBorderBrush #66FFFFFF
TextBoxDisabledFillBrush Transparent
TextBoxDisabledTextBrush #FF666666
TextBoxFillBrush #FFFFFFFF
TextBoxTextBrush #FF000000
ThumbBorderBrush #80555555
ThumbFillBrush #DEC8C8C8
ThumbPressedBrush #FF6DBDD1
ToggleSwitchCurtainBrush #FF008287
ToggleSwitchDisabledCurtainBrush Transparent
ToggleSwitchDisabledForegroundBrush #66FFFFFF
ToggleSwitchDisabledHeaderForegroundBrush #66FFFFFF
ToggleSwitchForegroundBrush #FFFFFFFF
ToggleSwitchHeaderForegroundBrush #99FFFFFF
ToggleSwitchInnerBorderBrush Transparent
ToggleSwitchPointerOverCurtainBrush #FF219297
ToggleSwitchOuterBorderBrush #59FFFFFF
ToggleSwitchOuterBorderDisabledBrush #33FFFFFF
ToggleSwitchPressedCurtainBrush #FF25BBC4
ToggleSwitchThumbBrush #FFFFFFFF
ToggleSwitchThumbDisabledBrush #FF7E7E7E
ToggleSwitchTrackBrush #59FFFFFF
ToggleSwitchTrackDisabledBrush #1FFFFFFF
ToolTipBackgroundBrush #FFFFFFFF
ToolTipBorderBrush #FF808080
ToolTipForegroundBrush #FF666666
TransparentntOutlineBrush Transparent


2012年01月19日(木曜日)

MetroスタイルアプリのJavaScript版とXAML版のコントロール対比表(Developer Preview時点)

Metro style apps using JavaScript XAML
Expression Blend 5 DPアセット名 WinJS名 HTML要素 テンプレート化されたアセット クラス名
Application Bar AppBar div Command Bar, Navigation Bar ApplicationBar
Button - button Command Button, Command Button Flyout, Command Button Menu Button
CheckBox - input - CheckBox
Date Picker DatePicker div - -
Drop-down List Box - select - ComboBox
- - canvas - Ellipse
FlipView FlipView div - FlipView
- Fragments div - Frame
- - div - Grid
ListView(layoutをGridLayoutに変更) ListView div - GridView
Link - a - HyperlinkButton
Image - img - Image
SemanticZoom SemanticZoom div - JumpViewer
Multi-line List Box - select - ListBox
ListView ListView div - ListView
- - video - MediaPlayer
- - audio -
Password Input Control - input - PasswordBox
Flyout Flyout div Flyout Custom, Flyout Menu, Flyout Menu Item Popup
Progress Bar - progress - ProgressBar
Progress Ring - progress - ProgressRing
Radio Button - input - RadioButton
Rating Rating div - -
- - canvas - Rectangle
Rich Text Input Control - div - RichTextBlock
Settings Pane SettingsPane div Settings Pane Narrow, Settings Pane Wide -
Slider - input - Slider
Label - label - TextBlock
Sing Line Text Input Control - input Email Address Input Control, File Upload Control, Telephone Number Input Control, Number Input Control, URL Input Control TextBox
Multi-line Text Input Control - textarea -
Time Picker TimePicker div - -
Toggle Toggle div - ToggleSwitch
Tooltip Tooltip div - Tooltip
View Box ViewBox div - Viewbox

2011年11月15日(火曜日)

Image.NineGridプロパティ

 System.Windows.ControlsのImageクラスにはありませんが、Windows.UI.XamlのImageクラスにはNineGridプロパティが存在します。


<UserControl x:Class="NineGridSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366">
    <UserControl.Resources>
        <Style TargetType="Image">
            <Setter Property="Margin" Value="50"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="Source" Value="/Images/NineGridImage.png"/>
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Image Stretch="None" />
        <Image Grid.Row="1" Width="200" Height="200" />
        <Image Grid.Row="2" Width="200" Height="200" NineGrid="3" />
    </Grid>

</UserControl>


f:id:Yamaki:20111115114204p:image


 「NineGridImage.png」は下の図のような8×7ピクセルの画像です。


f:id:Yamaki:20111115114721p:image


 NineGridプロパティを"3"、もしくは"3, 3, 3, 3"に設定すると、下の図のようなかたちで画像が9つの領域で分けられます。


f:id:Yamaki:20111115120058p:image


 この状態で画像を引き伸ばした場合、(1)の部分は左右方向にのみ引き伸ばされ、(2)の部分は上下方向にのみ引き伸ばされ、(3)は四方に引き伸ばされ、(4)の部分は引き伸ばされません。


2011年11月01日(火曜日)

XAMLとHTMLのMetroスタイルアプリで同じことをやってみる -Grid編-

<UserControl x:Class="XAMLGridLayout.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366"
    FontSize="64" FontFamily="Meiryo">

    <Grid x:Name="LayoutRoot" Background="#FF0C0C0C" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>

        <TextBlock Grid.ColumnSpan="2" Margin="10"
                 VerticalAlignment="Center" HorizontalAlignment="Center"
                 Text="高さ固定(100ピクセル)"/>
        <TextBlock Grid.Row="1" Grid.RowSpan="2" VerticalAlignment="Center"
                 Text="幅が自動" Margin="10" FontSize="64"/>
        <Border Grid.Row="1" Grid.Column="2"
                 Margin="10" BorderThickness="10" BorderBrush="White">
            <TextBlock Text="高さ1の比率" TextAlignment="Center"/>
        </Border>
        <Border Grid.Row="2" Grid.Column="2"
                 Margin="10" BorderThickness="10" BorderBrush="White">
            <TextBlock Text="高さ2の比率" TextAlignment="Center"/>
        </Border>
    </Grid>

</UserControl>


f:id:Yamaki:20111101174210p:image


 XAMLでレイアウトの基本となっているGridを使ったレイアウトは、HTML版のMetroスタイルアプリケーションではCSSのCSS Grid Layout Module Level 1を使ってほぼ同じように再現することができます。なお、現在Grid LayoutはIE10でしか実装されていないということもあり、ベンダープリフィックス「-ms」を付ける必要があります。


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>WinJsGridLayout</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <!-- WinJsGridLayout references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
	<style type="text/css">
		#ms-grid {
			display: -ms-grid;
			width: 100%;
			height: 100%;
			-ms-grid-rows: 100px 1fr 2fr;
			-ms-grid-columns: auto 1fr;
		}
	</style>
</head>
<body>
	<div id="ms-grid">
		<div style="-ms-grid-column-span: 2; -ms-grid-column-align: center; white-space: nowrap;">高さ固定(100ピクセル)</div>
		<div style="-ms-grid-row: 2; -ms-grid-row-span: 2; -ms-grid-row-align: center;">幅が自動</div>
		<div style="-ms-grid-column: 2; -ms-grid-row: 2; -ms-grid-column-align: stretch; -ms-grid-row-align: stretch; border: 10px solid white; margin: 10px; text-align: center;">高さ1の比率</div>
		<div style="-ms-grid-column: 2; -ms-grid-row: 3; -ms-grid-column-align: stretch; -ms-grid-row-align: stretch; border: 10px solid white; margin: 10px; text-align: center;">高さ2の比率</div></div>
</body>
</html>


f:id:Yamaki:20111101172442p:image