[Find Different] : #1 타이머 만들기

ProgressBar와 Button을 이용하여
Button을 누르면 시간이 ProgressBar의 시간이 흐르도록 만들기

 

 

 

 

 

 

Material Design Toolkit에서 기본적인 틀을 가져왔다.

<ProgressBar
  Value="25"
  Height="10" />

<Button
    Style="{StaticResource MaterialDesignRaisedDarkButton}"
    Width="100"
    ToolTip="Resource name: MaterialDesignRaisedLightDarkButton">
  _DARK
</Button>

 

 

 

 

 

 

 

 

 

 

기본적인 배치를 해줬다.

 

 

 

 

 

 

 

 

<ProgressBar
            Name="ProgressBar1"		// 이름을 지어준다.
            Margin="0,35,0,425"
            ValueChanged="ProgressBar_ValueChanged"
            HorizontalAlignment="Center"
            Height="30" Width="800"
            Grid.RowSpan="2" />

 배치를 하다보니 여러가지 코드가 생겼는데 이 중 유용한 기능은

Name

이다.  이걸 몰라서 몇 시간을 삽질했는지 모르겠다.

이름을 지어준다면 해당 요소들에 쉽게 접근이 가능하다.

 

 

 

 

 

 

 

<Button
            Style="{StaticResource MaterialDesignFlatDarkBgButton}"
            ToolTip="MaterialDesignFlatDarkButton"
            Margin="222,400,222,0"
            Click="Button_Click"
            Height="32" VerticalAlignment="Top"
            Grid.RowSpan="2">
            게임 시작		// 버튼에 표시될 내용
        </Button>

버튼은 주석 이 들어가있는 곳의 내용이

버튼에 표기된다는 것만 알면 지금은 충분하다.

 

 

 

 

 

 

 

private void Button_Click(object sender, RoutedEventArgs e)
        {
            Duration timeFlow = new Duration(TimeSpan.FromSeconds(100));
            DoubleAnimation barAnimate = new DoubleAnimation(ProgressBar1.Value + 100, timeFlow);
            ProgressBar1.BeginAnimation(ProgressBar.ValueProperty, barAnimate);
        }

이번 주제의 핵심 코드이다.

 

 

timeFlow : 적용 대상이 100초 동안 지속되도록 하라.

barAnimate : ProgressBar1.Value + 100 (Value 초기값은 0, 최댓값은 100임)의 결과를 timeFlow의 시간동안 진행하라.

ProgressBar1.BeginAnimation() : ProgressBar의 값 속성을 barAnimate의 성질로 움직여라.

 

 

 

 

 

 

 

 

결과

---

 

 

 

처음 이 코드를 쓸 때는 저기에 뭐가 들어가야 하는지,

따라 쓰면서도 빨간 줄의 연속이어서 어렵다고만 생각했는데

작동하도록 고치고, 의미를 찾아보며 읽어보니 단순하게 느껴지기도 했다.

 

 

이걸 짜기 전엔 별의 별 클래스를 만들고,

스레드에 timer에 여러가지 다 들고 왔는데

그 길었던 생각이 3줄로 정리가 되니 뿌듯함 반 허탈함 반이다.