Уменьшить маржу кнопки, когда кнопка находится в фокусе - PullRequest
Новая
       25

Уменьшить маржу кнопки, когда кнопка находится в фокусе

0 голосов
/ 28 марта 2012

У меня есть сценарий, в котором я хочу уменьшить поля элемента управления Button, когда он получает фокус. Это потому, что я не хочу увеличивать свойство border этого элемента управления Button и в то же время не хочу, чтобы кнопка оставалась одинакового размера (высота и ширина). Поэтому небольшое усилие в Интернете заставило меня написать ValueConverter и уменьшить маржу. Но я до сих пор не могу поднять рабочий код. Вот что я перемешал

Xaml 

<ControlTemplate.Triggers> <!--ControlTemplate for the Button-->
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="BorderBrush" TargetName="bdrButton" Value="Wheat"/>
                            <Setter Property="BorderThickness" TargetName="bdrButton" Value="2"/>
                            <Setter Property="Margin" TargetName="bdrButton" >
                                <Setter.Value>
                                <Binding ElementName="bdrButton" Path="Margin" Converter="{StaticResource N_MarginReducer}">
                                        <Binding.ConverterParameter>
                                            <Thickness>1,1,1,1</Thickness>
                                        </Binding.ConverterParameter>
                                    </Binding>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>

Преобразователь: 

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
    Thickness newMargin = new Thickness();
    Thickness margin = (Thickness)value;
    Thickness reduceBy = (Thickness)parameter;

    newMargin.Left = margin.Left - reduceBy.Left;
    newMargin.Top = margin.Top - reduceBy.Top;
    newMargin.Right = margin.Right - reduceBy.Right;
    newMargin.Bottom = margin.Bottom - reduceBy.Bottom;

    return newMargin;
}

Приведенный выше код приводит к тому, что StackOverFlowException для Margin.Left вызывается рекурсивно. У любого есть лучшая идея или реализация для сценария, которого я пытаюсь достичь.

1 Ответ

0 голосов
/ 28 марта 2012

Вместо конвертера вы захотите использовать Анимацию для толщины и Двойную анимацию для высоты / ширины.

http://msdn.microsoft.com/en-us/library/system.windows.media.animation.thicknessanimation.aspx

http://msdn.microsoft.com/en-us/library/system.windows.media.animation.doubleanimation.aspx

Пример: 

<StackPanel>
    <StackPanel.Resources>
        <Thickness x:Key="unfocusedThickness" Top="15" Left="15" Right="15" Bottom="15"/>
        <Thickness x:Key="focusedThickness" Top="5" Left="5" Right="5" Bottom="5"/>
    </StackPanel.Resources>
    <Button Height="100" Width="100" Margin="15">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.GotFocus">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Height" From="100" To="120" Duration="0:0:0"/>
                        <DoubleAnimation Storyboard.TargetProperty="Width" From="100" To="120" Duration="0:0:0"/>
                        <ThicknessAnimation Storyboard.TargetProperty="Margin" From="{StaticResource unfocusedThickness}" To="{StaticResource focusedThickness}" Duration="0:0:0"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.LostFocus">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Height" From="120" To="100" Duration="0:0:0"/>
                        <DoubleAnimation Storyboard.TargetProperty="Width" From="120" To="100" Duration="0:0:0"/>
                        <ThicknessAnimation Storyboard.TargetProperty="Margin" To="{StaticResource unfocusedThickness}" From="{StaticResource focusedThickness}" Duration="0:0:0"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
    <TextBox />
</StackPanel>
...