Как убрать черное пространство вокруг кнопки в WP7? - PullRequest
6 голосов
/ 23 января 2012

Как я вижу, кнопки WP7 окружены черным пространством в несколько пикселей.Как я могу это удалить?

Я прочитал этот пост, но мне не удалось его удалить!Не могли бы вы привести рабочий пример?

Я пытался обернуть кнопку с элементом <Border... />, но она не сработала.

это мой XAML

<ItemsControl Name="icCells" Grid.Row="1">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Background="Red" BorderThickness="0"  Width="40" Height="40" BorderBrush="Green" Padding="0" Margin="0" />

                </DataTemplate>                   
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

Спасибо

Ответы [ 3 ]

14 голосов
/ 23 января 2012

Попробуйте следующее:

Стиль

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="CustomButtonStyle" 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="0"/>
        <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="Foreground" 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="Foreground" 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="0">
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

XAML

<Button Style="{StaticResource CustomButtonStyle}"/>

Если вы хотите изменить поле (я сделал это 0), найдите следующеев стиле:

Margin="0"

Если вы хотите изменить отступы (я сделал это 0), найдите в стиле следующее:

"Padding" Value="0"

Я рекомендую немного его изменитьменьше ... лично я думаю, что от большого до большого отступа

5 голосов
/ 23 января 2012

Вы можете легко сделать это в Blend.

Открыть проект в blend.Нажмите правую кнопку мыши и в меню выберите «Редактировать шаблон» -> «Редактировать копию» -> «Имя стиля».

Справа, в окне объекта и шкалы времени, вы можете видеть сетку, внутри которой у вас есть кнопкафон и контентконтейнер.Измените размер контейнера до размера кнопки, теперь вы не увидите пустого пространства.Теперь этот же стиль можно применить и к другим кнопкам.

0 голосов
/ 23 января 2012

Теорию можно найти здесь: http://msdn.microsoft.com/en-us/library/ms745683.aspx

...