しっぽを追いかけて

ぐるぐるしながら考えています

Unity と猫の話題が中心   掲載内容は個人の私見であり、所属組織の見解ではありません

Path の Fill プロパティをコントロールに応じてに遷移させる

Windows ストアアプリで Path をアイコンに使った場合、多少表示負荷は上がりますが画像を利用する場合に比べ解像度による見え方の差が少なく、素材の加工もしやすいので便利です。

f:id:matatabi_ux:20140209232047p:plain

ただし、ボタンのアイコンとして単に Path を利用すると上記の一番左のように、押下時に期待通りにインタラクションされません;

上記の 3 つの例のコードは下記のような感じです

<Grid Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Grid.Column="0" Margin="0,0,0,10" Text="通常 Path" />
    <Button Grid.Row="1"
            Grid.Column="0"
            Width="64"
            Height="64"
            Padding="4">
        <Button.ContentTemplate>
            <DataTemplate>
                <Path Data="M40.593077,23.105956C39.488272,23.105956 38.593069,24.001301 38.593069,25.106279 38.593069,26.211258 39.488272,27.106603 40.593077,27.106603 41.697981,27.106603 42.593086,26.211258 42.593086,25.106279 42.593086,24.001301 41.697981,23.105956 40.593077,23.105956z M30.704337,22.772602C29.599531,22.772602 28.704328,23.667846 28.704328,24.772925 28.704328,25.877903 29.599531,26.773249 30.704337,26.773249 31.809241,26.773249 32.704344,25.877903 32.704345,24.772925 32.704344,23.667846 31.809241,22.772602 30.704337,22.772602z M14.54211,0.00035572052C15.802886,0.0092325211 16.58412,0.18127823 16.58412,0.18127823 23.485679,1.3921976 25.704933,4.9018354 25.704933,4.9018354 25.949128,10.833412 21.669316,7.8373942 21.669316,7.8373952 15.615339,3.0678883 9.7522593,7.8373942 9.7522593,7.8373952 4.8069801,13.157571 9.384367,17.559794 9.384367,17.559794L9.366334,17.657086 9.9304647,17.415974C13.087139,16.152865 17.116883,15.675261 21.736645,17.64938 21.736645,17.64938 18.711193,27.188319 24.489802,33.334781 24.489802,33.334781 28.089292,38.305764 33.447886,36.849477L33.708935,36.773505 33.625487,36.756291C30.430845,36.052846 26.50798,33.609031 24.752429,26.248591 24.752428,26.248591 24.385235,19.940095 25.762113,15.768199 25.762114,15.768199 26.404005,14.1646 26.771198,13.980999 26.771198,13.981 29.797254,15.1725 32.915603,20.125597 32.915603,20.125596 35.392264,19.117795 39.428602,20.676393 39.428602,20.676394 44.10623,16.733099 45.481812,16.090498 45.481812,16.090498 47.137384,14.899099 47.363981,17.100198 47.363981,17.100198 49.975342,32.416587 38.419519,36.727183 38.419519,36.727183 37.988069,36.850158 37.27354,36.933351L37.27213,36.933503 31.552193,61.401002 31.543093,61.398763 31.532641,61.439126C31.142982,62.68316 29.974305,63.586999 28.592049,63.586999 26.892111,63.586999 25.513,62.21787 25.513,60.53045 25.513,60.319287 25.534548,60.113156 25.575579,59.914098L25.646807,59.639108 27.540478,49.804463 27.503281,49.826901C27.066931,50.062299 26.5669,50.195996 26.03545,50.195996 25.398199,50.195996 24.805978,50.003469 24.314629,49.673718L24.097411,49.512364 21.845176,60.854451 21.842209,60.912763C21.695503,62.346772 20.475501,63.466001 18.99235,63.466001 17.607988,63.466001 16.452476,62.491029 16.185228,61.19513L16.146361,60.942437 16.142332,60.942105 16.142332,60.916242 16.141797,60.912763C16.132012,60.817163 16.127,60.720162 16.127,60.622003 16.127,60.523728 16.132012,60.426625 16.141797,60.330922L16.142332,60.327439 16.142332,44.432408 11.465205,43.973413 11.465205,60.344918 11.504972,60.603707C11.515572,60.707368 11.521001,60.812551 11.521001,60.919 11.521001,62.620198 10.131096,63.998998 8.41609,63.998998 6.7033844,63.998998 5.3140011,62.620198 5.3140011,60.919L5.3030758,60.865792C4.9806252,59.305284 -0.17445564,34.330167 0.091741562,33.883576 0.091741562,33.883576 -0.73384476,27.831016 2.568224,22.786047 2.568224,22.786047 2.6158104,22.725036 2.7089729,22.614864L2.7471142,22.570158 2.6695442,22.45659C-3.2185345,13.58299 2.470499,5.8803387 2.470499,5.8803387 6.6737251,0.75103283 11.768407,-0.019174576 14.54211,0.00035572052z"
                      Fill="White"
                      Stretch="Uniform" />
            </DataTemplate>
        </Button.ContentTemplate>
    </Button>
    <TextBlock Grid.Row="0" Grid.Column="1" Margin="20,0,20,10" Text="PathIcon" />
    <Button Grid.Row="1"
            Grid.Column="1"
            Width="64"
            Height="64"
            Margin="20,0"
            HorizontalAlignment="Center"
            Padding="4">
        <Button.ContentTemplate>
            <DataTemplate>
                <PathIcon Data="M40.593077,23.105956C39.488272,23.105956 38.593069,24.001301 38.593069,25.106279 38.593069,26.211258 39.488272,27.106603 40.593077,27.106603 41.697981,27.106603 42.593086,26.211258 42.593086,25.106279 42.593086,24.001301 41.697981,23.105956 40.593077,23.105956z M30.704337,22.772602C29.599531,22.772602 28.704328,23.667846 28.704328,24.772925 28.704328,25.877903 29.599531,26.773249 30.704337,26.773249 31.809241,26.773249 32.704344,25.877903 32.704345,24.772925 32.704344,23.667846 31.809241,22.772602 30.704337,22.772602z M14.54211,0.00035572052C15.802886,0.0092325211 16.58412,0.18127823 16.58412,0.18127823 23.485679,1.3921976 25.704933,4.9018354 25.704933,4.9018354 25.949128,10.833412 21.669316,7.8373942 21.669316,7.8373952 15.615339,3.0678883 9.7522593,7.8373942 9.7522593,7.8373952 4.8069801,13.157571 9.384367,17.559794 9.384367,17.559794L9.366334,17.657086 9.9304647,17.415974C13.087139,16.152865 17.116883,15.675261 21.736645,17.64938 21.736645,17.64938 18.711193,27.188319 24.489802,33.334781 24.489802,33.334781 28.089292,38.305764 33.447886,36.849477L33.708935,36.773505 33.625487,36.756291C30.430845,36.052846 26.50798,33.609031 24.752429,26.248591 24.752428,26.248591 24.385235,19.940095 25.762113,15.768199 25.762114,15.768199 26.404005,14.1646 26.771198,13.980999 26.771198,13.981 29.797254,15.1725 32.915603,20.125597 32.915603,20.125596 35.392264,19.117795 39.428602,20.676393 39.428602,20.676394 44.10623,16.733099 45.481812,16.090498 45.481812,16.090498 47.137384,14.899099 47.363981,17.100198 47.363981,17.100198 49.975342,32.416587 38.419519,36.727183 38.419519,36.727183 37.988069,36.850158 37.27354,36.933351L37.27213,36.933503 31.552193,61.401002 31.543093,61.398763 31.532641,61.439126C31.142982,62.68316 29.974305,63.586999 28.592049,63.586999 26.892111,63.586999 25.513,62.21787 25.513,60.53045 25.513,60.319287 25.534548,60.113156 25.575579,59.914098L25.646807,59.639108 27.540478,49.804463 27.503281,49.826901C27.066931,50.062299 26.5669,50.195996 26.03545,50.195996 25.398199,50.195996 24.805978,50.003469 24.314629,49.673718L24.097411,49.512364 21.845176,60.854451 21.842209,60.912763C21.695503,62.346772 20.475501,63.466001 18.99235,63.466001 17.607988,63.466001 16.452476,62.491029 16.185228,61.19513L16.146361,60.942437 16.142332,60.942105 16.142332,60.916242 16.141797,60.912763C16.132012,60.817163 16.127,60.720162 16.127,60.622003 16.127,60.523728 16.132012,60.426625 16.141797,60.330922L16.142332,60.327439 16.142332,44.432408 11.465205,43.973413 11.465205,60.344918 11.504972,60.603707C11.515572,60.707368 11.521001,60.812551 11.521001,60.919 11.521001,62.620198 10.131096,63.998998 8.41609,63.998998 6.7033844,63.998998 5.3140011,62.620198 5.3140011,60.919L5.3030758,60.865792C4.9806252,59.305284 -0.17445564,34.330167 0.091741562,33.883576 0.091741562,33.883576 -0.73384476,27.831016 2.568224,22.786047 2.568224,22.786047 2.6158104,22.725036 2.7089729,22.614864L2.7471142,22.570158 2.6695442,22.45659C-3.2185345,13.58299 2.470499,5.8803387 2.470499,5.8803387 6.6737251,0.75103283 11.768407,-0.019174576 14.54211,0.00035572052z"
                />
            </DataTemplate>
        </Button.ContentTemplate>
    </Button>
    <TextBlock Grid.Row="0" Grid.Column="2" Margin="0,0,0,10">
        <Run Text="Fill に Foreground " />
        <LineBreak />
        <Run Text="をバインドした Path" />
    </TextBlock>
    <Button Grid.Row="1"
            Grid.Column="2"
            Width="64"
            Height="64"
            HorizontalAlignment="Center"
            Padding="4">
        <Button.ContentTemplate>
            <DataTemplate>
                <Path Data="M40.593077,23.105956C39.488272,23.105956 38.593069,24.001301 38.593069,25.106279 38.593069,26.211258 39.488272,27.106603 40.593077,27.106603 41.697981,27.106603 42.593086,26.211258 42.593086,25.106279 42.593086,24.001301 41.697981,23.105956 40.593077,23.105956z M30.704337,22.772602C29.599531,22.772602 28.704328,23.667846 28.704328,24.772925 28.704328,25.877903 29.599531,26.773249 30.704337,26.773249 31.809241,26.773249 32.704344,25.877903 32.704345,24.772925 32.704344,23.667846 31.809241,22.772602 30.704337,22.772602z M14.54211,0.00035572052C15.802886,0.0092325211 16.58412,0.18127823 16.58412,0.18127823 23.485679,1.3921976 25.704933,4.9018354 25.704933,4.9018354 25.949128,10.833412 21.669316,7.8373942 21.669316,7.8373952 15.615339,3.0678883 9.7522593,7.8373942 9.7522593,7.8373952 4.8069801,13.157571 9.384367,17.559794 9.384367,17.559794L9.366334,17.657086 9.9304647,17.415974C13.087139,16.152865 17.116883,15.675261 21.736645,17.64938 21.736645,17.64938 18.711193,27.188319 24.489802,33.334781 24.489802,33.334781 28.089292,38.305764 33.447886,36.849477L33.708935,36.773505 33.625487,36.756291C30.430845,36.052846 26.50798,33.609031 24.752429,26.248591 24.752428,26.248591 24.385235,19.940095 25.762113,15.768199 25.762114,15.768199 26.404005,14.1646 26.771198,13.980999 26.771198,13.981 29.797254,15.1725 32.915603,20.125597 32.915603,20.125596 35.392264,19.117795 39.428602,20.676393 39.428602,20.676394 44.10623,16.733099 45.481812,16.090498 45.481812,16.090498 47.137384,14.899099 47.363981,17.100198 47.363981,17.100198 49.975342,32.416587 38.419519,36.727183 38.419519,36.727183 37.988069,36.850158 37.27354,36.933351L37.27213,36.933503 31.552193,61.401002 31.543093,61.398763 31.532641,61.439126C31.142982,62.68316 29.974305,63.586999 28.592049,63.586999 26.892111,63.586999 25.513,62.21787 25.513,60.53045 25.513,60.319287 25.534548,60.113156 25.575579,59.914098L25.646807,59.639108 27.540478,49.804463 27.503281,49.826901C27.066931,50.062299 26.5669,50.195996 26.03545,50.195996 25.398199,50.195996 24.805978,50.003469 24.314629,49.673718L24.097411,49.512364 21.845176,60.854451 21.842209,60.912763C21.695503,62.346772 20.475501,63.466001 18.99235,63.466001 17.607988,63.466001 16.452476,62.491029 16.185228,61.19513L16.146361,60.942437 16.142332,60.942105 16.142332,60.916242 16.141797,60.912763C16.132012,60.817163 16.127,60.720162 16.127,60.622003 16.127,60.523728 16.132012,60.426625 16.141797,60.330922L16.142332,60.327439 16.142332,44.432408 11.465205,43.973413 11.465205,60.344918 11.504972,60.603707C11.515572,60.707368 11.521001,60.812551 11.521001,60.919 11.521001,62.620198 10.131096,63.998998 8.41609,63.998998 6.7033844,63.998998 5.3140011,62.620198 5.3140011,60.919L5.3030758,60.865792C4.9806252,59.305284 -0.17445564,34.330167 0.091741562,33.883576 0.091741562,33.883576 -0.73384476,27.831016 2.568224,22.786047 2.568224,22.786047 2.6158104,22.725036 2.7089729,22.614864L2.7471142,22.570158 2.6695442,22.45659C-3.2185345,13.58299 2.470499,5.8803387 2.470499,5.8803387 6.6737251,0.75103283 11.768407,-0.019174576 14.54211,0.00035572052z"
                      Fill="{Binding Foreground,
                                     RelativeSource={RelativeSource Mode=TemplatedParent}}"
                      Stretch="Uniform" />
            </DataTemplate>
        </Button.ContentTemplate>
    </Button>
</Grid>

1 番目は Button の ContentTemplate に単に Path を配置した例、 2 番目は Foreground プロパティを持つ PathIcon で Path の代用をした例、 3 番目は Path の Fill プロパティに RelativeSource で Forefround をバインドした例です

1 番目は押下時に Button の Foreground の変化が伝わらないので真っ白になってしまいます

2 番目は PathIcon が Foreground を持っているので Button の変化が伝わり反転しますが、Stretch プロパティが設定できないので 表示位置の調整ができません

3 番目は Path の Fill に Button の Foreground をバインドしてどちらの問題も解決した例です

とりあえず 3 番目のような実装をすれば Path をいろんな場所のアイコンとして利用していけそうですね