조건부 Storyboard 실행 방법

[Aaron Choi]

안녕하세요.

WPF를 이제막 시작했습니다

질문은 Storyboard 실행을 조건부로 하고싶은데 어떻게 해야되는지 전혀 감이 없어서 질문 드립니다.

view화면 밖에 StackPanel을 하나 배치하고

view에서 특정 버튼을 누르면 애니메이션으로 StackPanel을 view 안쪽으로 슬라이딩 시키고

다시 특정 버튼을 누르면 밖으로 슬라이딩 시키려고 합니다.

질문은 현재 StackPanel의 위치에 따라 슬라이딩 방향을(안쪽, 바깥쪽) 조건문으로 판단하고 싶습니다.

 * 토클버튼은 사용 하지 않으려고 합니다!!!

--> resource

<appComm:LeftPanelDimensionsConverter x:Key="LeftPanelConverter" />
<appComm:RightPanelDimensionsConverter x:Key="RightPanelConverter" />
<appComm:LeftPanelMarginConverter x:Key="LeftMarginConverter" />
<appComm:RightPanelMarginConverter x:Key="RightMarginConverter" />

view storyboard

-> 슬라이딩

<Storyboard x:Key="OpenLeftSideBar"
                    TargetProperty="RenderTransform.(TranslateTransform.X)"
                    AccelerationRatio=".4"
                    DecelerationRatio=".4">
            <DoubleAnimation Storyboard.TargetName="LeftsidePanel" Duration="0:0:0.2" From="0">
                <DoubleAnimation.To>
                    <MultiBinding Converter="{StaticResource LeftPanelConverter}">
                        <Binding Mode="OneWay" ElementName="LeftPropertiesPanel" Path="Width" />
                    </MultiBinding>
                </DoubleAnimation.To>
            </DoubleAnimation>
</Storyboard>

<- 슬라이딩

<Storyboard x:Key="CloseLeftSideBar"
                    TargetProperty="RenderTransform.(TranslateTransform.X)"
                    AccelerationRatio=".4"
                    DecelerationRatio=".4">
            <DoubleAnimation Storyboard.TargetName="LeftsidePanel" Duration="0:0:0.1" To="0">
                <DoubleAnimation.From>
                    <MultiBinding Converter="{StaticResource LeftPanelConverter}">
                        <Binding Mode="OneWay" ElementName="LeftPropertiesPanel" Path="Width" />
                    </MultiBinding>
                </DoubleAnimation.From>
            </DoubleAnimation>

</Storyboard>

버튼 트리거

<Button Grid.Column="0" x:Name="btnSet"
             Background="#FF303030" Foreground="WhiteSmoke">
             <Image Source="/Images/Setup.png" Stretch="Uniform" Height="60" />
                    <Button.Triggers>
                        <EventTrigger RoutedEvent="Button.Click" >
                            <BeginStoryboard Storyboard="{StaticResource OpenLeftSideBar}"/>
                        </EventTrigger>
                    </Button.Triggers>

</Button>

리소스 클래스

public class LeftPanelDimensionsConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            double? dTotalWidth = 0;

            foreach (object o in values)
            {
                bool bParsed = int.TryParse(o.ToString(), out int nCurrent);
                if (bParsed)
                {
                    dTotalWidth += nCurrent;
                }
            }

            //ensure negative dValue for scolling Right
            return dTotalWidth;
        }

        public object[] ConvertBack(object dValue, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

    /// <summary>
    /// SideBar Margin 조절
    /// </summary>
    internal class LeftPanelMarginConverter : IValueConverter
    {
        public object Convert(object dValue, Type targetType, object parameter, CultureInfo culture)
        {
            if (dValue is double)
            {
                double dWidth = (double)dValue;
                Thickness panelMarginThickness = new Thickness(0, 0, dWidth * -1, 0);
                return panelMarginThickness;
            }

            throw new NotImplementedException();
        }

        public object ConvertBack(object dValue, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

조건을 어디에 어떻게 해야될까요?

[카키104]

질문을 확인하겠습니다.
위의 코드는 버튼을 클릭했을 때 LeftPropertiesPanel 패널을 여는 OpenLeftSideBar 스토리 보드를 실행시키고 있는데, 이 것을 버튼이 클릭될 때마다 특정 조건을 이용해서 4개의 Panel 중 1개를 선택해서, Open되는 애니메이션을 실행시키고 싶다는 것인가요?
왼쪽 패널은 오른쪽으로, 오른쪽 패널은 왼쪽으로, 위에 패널은 아래로, 아래 패널은 위로 열리는 애니매이션을 원하시는 것이 맞는지요?

[Aaron Choi]

안녕하세요
정확하게 패널은 한개이고
1개의 버튼 이벤트에서 스토리보드 시작 전 패널의 위치를 확인 후
오른쪽으로 슬라이딩 되어 있으면 왼쪽으로, 왼쪽에 있으면 오른쪽으로 슬라이딩 시키고 싶습니다.
대략 비하인드 코드로 표현하자면 아래와 같습니다.

OnButtonClick()
{
if(StackPanel.Left >= 300) CloseLeftSideBar()
else OpenLeftSideBar()
}

MVVM을 같이 공부하고 있는데 VIEW에서 비하인드 코드를 쓰고싶지 않아서 질문 드렸습니다. (__
제가 초보이다 보니 질문의 의도를 정확하게 전달드리기가 어렵네요 ㅜㅜ

공부하면서 작성하고 있는 소스입니다.

https://github.com/continues77/wpf_study

[카키104]

소스를 보니 알겠습니다. 왼쪽 하단 버튼을 처음 클릭하면, 패널이 오른쪽으로 나왔다가, 다시한번 클릭하면 왼쪽으로 이동해서 보이지 않게 하려고 하시는거군요 맞지요?

그런데, 버튼을 한번은 누를수 있는데, 누르면 패널이 튀어나와서 버튼을 가려서 두번째는 누르지 못하는데요?
패널에 클릭하면 닫히는 스토리 보드를 호출해서 닫히기는 하네요 버튼으로 처리를 고민하시다가 이렇게 변경하신건가요?

[Aaron Choi]

소스까지 봐주셔서 고맙습니다.
실제 하고자 하는 의도는 버튼을 누르면 오른쪽으로 패널을 슬라이딩 시키고, 슬라이딩 된 패널의 버튼을 누르면 자동으로
화면전환 되면서 슬라이딩 된 패널을 감추려고 합니다. (해당 기능은 되어 있음, 패널의 클릭이벤트 발생 시 슬라이딩 닫힘)
단, 메인뷰의 하단에 별도의 기능 버튼들이 있는데 해당 버튼을 눌렀을경우에도 이미 패널이 슬라이딩 되어 있으면 화면을 감추고 싶습니다.
이렇게 하려고 하니 좌측 패널이 우측으로 슬라이딩이 되어 있지 않았을때에도 패널을 닫는 동작의 스토리 보드를 강제로 실행시키니 패널이 잠깐 화면에 표시되면서 닫히는 동작을 해서 이 부분을 해결해보려고 질문 드렸습니다.