Как правильно использовать значки, поставляемые с WP7 SDK?

Question

В SDK предусмотрены значки для «светлого» или «темного» в зависимости от темы, установленной на телефоне. На панели приложения при смене темы иконки автоматически меняются вместе с ней. Кроме того, когда вы нажимаете кнопку, изображение переворачивается (чтобы оно все еще было видно) независимо от того, на какую тему вы работаете. Я легко могу понять, как изменить значок на основе текущей темы. Однако, что не легко понять, так это то, как изменить значок при нажатии кнопки.

Чтобы быть более понятным. Допустим, я использую «Темную» тему. Я создаю кнопку, которая использует темный значок. При нажатии кнопки фон белый, но сам значок остается белым и поэтому не виден. На панели приложения значок станет черным, что, конечно, видно на белом фоне.

Это имеет смысл? Кто-нибудь знает, как это исправить?

Answer 1

Вместо использования светлых и темных значков вы можете использовать один значок в качестве маски непрозрачности. Это всего лишь пример, вы можете захотеть сделать его отдельным элементом управления, чтобы сделать настройку иконки аккуратнее, вы можете иметь код C # для ToggleButton, если хотите. Также эта серия может представлять некоторый интерес.

<Style x:Key="IconButton" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        <Setter Property="Padding" Value="10,3,10,5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
                            <Grid x:Name="ContentContainer" OpacityMask="{TemplateBinding Content}" Background="{TemplateBinding Foreground}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Использование

<Button Style="{StaticResource IconButton}" >
    <ImageBrush ImageSource="appbar.feature.search.rest.png" Stretch="None"/>
</Button>

Объяснение: OpacityMask использует альфа-значение кисти для элемента, так как для этого требуется кисть, которую можно использовать с градиентом или ImageBrush. В этом случае прямоугольник ContentContainer принимает форму предоставленного изображения, так как используется только альфа-канал, это может быть любой цвет, который вы хотите. ContentContainer использует цвет переднего плана, стиль которого изменяется при его нажатии, вы можете изменить цвет значка, изменив передний план кнопок. Этот стиль в основном используется по умолчанию, но вместо ContentControl вместо него используется Grid с OpacityMask.

Обычно вы бы не помещали ImageBrush непосредственно в кнопку, но это делается как быстрый обходной путь для некоторых ограничений связывания в Silverlight v3. В качестве альтернативы вы можете использовать пользовательский элемент управления со свойством Uri для Icon, который обновляет свойство Brush для маски. Стиль будет использовать пользовательское свойство Brush в качестве OpacityMask вместо Button.Content. Поскольку OpacityMask использует только альфа-канал, этот метод не подходит для цветных изображений.

Answer 2

На самом деле - WP7 имеет несколько умов вокруг себя и автоматически делает «темные» версии светлых значков (а также правильно обрабатывает нажатие кнопок) при соблюдении следующих условий:

• Значок 48x48
• В формате .PNG (на самом деле не пробовал с .jpg, но я сомневаюсь, что это сработает)
• Где значок белый и фон прозрачный (может работать и с черным, но ваш вопрос, кажется, предлагает иное)

Я использую один набор иконок в приложении WP7, и он автоматически обрабатывает светлые / темные темы - раньше был также пакет AppBarIcon от Microsoft , но быстрый Google просто дает у меня битые ссылки на данный момент. Пришлите мне письмо, если вы в отчаянии, и я могу щелкнуть их по-вашему.

Хотя предложенный подход с OpacityMask, вероятно, работает, он звучит намного сложнее, чем просто использование белого на прозрачных 48x48 pngs. :) Дайте мне знать, как вы идете!