GSI

사용자 삽입 이미지

xaml 코드로만 작성해본 폼입니다.

관련코드 :


.
Posted by gsi
:

사용자 삽입 이미지

기본 UI만 구현해 봤어요.

UserControl의 기능을 처리 하기 위해서 의존 프로퍼티도 있어야 할거 같은데요. Click 버튼을 누르면 UserControl의 시작 스토리 보드 객체를 Begin() 하면 될듯, 더 내용을 추가 하고 몇가지 테스트를 해보면서 조금씩 기본기를 익혀야 할거 같다.

관련 코드
Posted by gsi
:

사용자 삽입 이미지

Win Form 에서 WPF 를 추가 해서 사용할때는 ElementHost를 사용합니다.
자세한 내용은 Win Form 에 WPF 컨트롤 붙이기 를 참고 하시구요.

그렇다면 이제 반대로 WPF 에서 Win Form을 추가 해서 쓰고 싶을때는 어떻게 할까 고민해보니.
WindowsFormsHost 라는 객체를 이용하면 처리가 되네요.

<Grid>
    <my:WindowsFormsHost ... />
</Grid>

이렇게 xaml 코드를 추가한 후에 cs 파일에서 추가를 아래와 같이 합니다.

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    WindowsFormsControlLibrary1.UserControl1 uc =
        new WindowsFormsControlLibrary1.UserControl1();

    windowsFormsHost1.Child = uc;
}

중점 사항

  • UserControl 클래스를 추가 해서 사용해야 합니다. 즉, userControl 의 dll 파일을 참조 추가 해서
    사용해야 한다는 말이죠.
  • WPF 에서 Win Form의 UserControl의 객체를 접근하기 위해서는 노출이 되어 있지 않기 때문에 게터 메소드를 하나 만들어서 해야 합니다.
    예)  public string TextValue { get { return textBox1.Text; } }
  • 위의 게터 메소드가 노출되어 있다면 아래와 같이 WPF를 통해서 값을 참조할 수 있네요.
    예) WindowsFormsControlLibrary1.UserControl1 uc =
            (WindowsFormsControlLibrary1.UserControl1)windowsFormsHost1.Child;
         textBox1.Text = uc.TextValue;

다른 몇가지 사항에 대해서는 더 테스트를 해보지 않았습니다.
우선 자세한 코드는 아래 파일을 보세요.
더 자세한 사항이나 기타 의논하고 싶으신 부분 있으시면 언제든 연락 부탁 해요.

관련 파일:


Posted by gsi
:

[WPF] - Angle Gauge 데모

WPF Sample 2008. 3. 10. 18:03 |


사용자 삽입 이미지

Angle Gauge 를 표현해 봤습니다.
원형의 형태에서 AngleArc 같은걸 표현하지 못해서..
조금 다르게 표현해 봤네요.. -.-
Design 에서 그려서 Blend 를 통해서 표현해 봤어요.
TextBox 를 통해서 각도를 입력 받고, Start를 사용해서 에니메이션 구동..

UI만 이쁘게 꾸민다면.. 나름 이쁜 상태 표시용 게이지가 되겠네요.

관련 코드 :
Posted by gsi
:

사용자 삽입 이미지

Wpf Animation( Storyboard ) Demo

Xaml의 Storyboard를 추가 하고 cs 파일을 통해서 처리 해봤습니다.

- Button 을 누르면 해당 값을 설정하고 바로 에니메이션을 동작한다.
- SliderBar 을 누르면 해당 값을 설정하고 바로 에니메이션을 동작한다.

관련코드 :
Posted by gsi
:

사용자 삽입 이미지

Canvas에 사용자 정의 객체를 바인딩 해서 적용해 본 결과.

관련 코드 :
Posted by gsi
:

사용자 삽입 이미지


슬라이더 형태의 특정한 수치 정보를 담고 있다.
마우스로 바의 내부를 클릭 하면 해당 위치까지 녹색의 바가 에니메이션 플레이 되면서 움직인다.

아래의 설정값은 시작과 끝의 지점을 알려 준다.

조금 고쳐야 할 것은 있지만. 우선 이걸로 써야 할듯 하다.

관련코드 :
Posted by gsi
:

사용자 삽입 이미지

본 프로그램은 위의 그림의 Grid 객체가 중앙을 기준으로 회전하는 에니메이션 예제 입니다.
Start Angle, End Angle의 값을 변경해서 시작과 끝의 각도를 정해줄 수 있습니다.
Start, End의 회전각도를 정하고 Start 버튼을 누르면 원하는 각도만큼 회전할 수 있습니다.

본 예제는 Animation을 진행할 때 Value의 객체를 cs 파일에서 접근해서 처리 하기가 힘든 기존의 부분을 처리 하기 쉽도록 테스트를 해본 겁니다. ^^ (개인적으로 힘들었어요)

[코드 설명]
Animation의 SplineDoubleKeyFrame에 들어 가는 Value의 값을 바꾸기 위해서
처리용 클래스를 하나 제작했습니다.

    public class AniControl
    {
        private int start;
        private int end;

        public int Start
        {
            set { start = value; }
            get { return start; }
        }

        public int End
        {
            set { end = value; }
            get { return end; }
        }
    }

이제 연동을 위해서 xaml 코드에 추가작업을 했습니다.

xmlns:src="clr-namespace:CircleRotate" <-- 네임스페이스를 <Window.. 여기에 추가했습니다.

Window.Resources 내부에 미리 값을 지정하면서 aniControl을 하나 제작생성했습니다.

<src:AniControl x:Key="aniControl" Start="10" End="180" />

미리 제작한 Timeline1의 에니메이션 코드의 SplineDoubleKeyFrame 의 Value에 DataBind를 연결합니다.

<Storyboard x:Key="Timeline1">
 <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
        <SplineDoubleKeyFrame KeyTime="00:00:00"
                              Value="{Binding Source={StaticResource aniControl}, Path=Start}"/>
  <SplineDoubleKeyFrame KeyTime="00:00:02"
                              Value="{Binding Source={StaticResource aniControl}, Path=End}"/>
 </DoubleAnimationUsingKeyFrames>
</Storyboard>

이렇게 해서 실행해 보면 객체를 회전시킬 수 있습니다.
여기서 조금더 추가를 해서 Start, End의 값을 TextBox를 통해서 값을 받아서 회전 값을 처리하도록 구현했습니다.
TextBox의 값을 바로 바인딩해도 되지만 aniControl로 값을 보내도록 해봤습니다.

<TextBox HorizontalAlignment="Left" Margin="90,80,0,0" VerticalAlignment="Top" Width="56" Height="24"
         Text="{Binding Source={StaticResource aniControl}, Path=Start, Mode=TwoWay}"
         TextWrapping="Wrap" RenderTransformOrigin="0,0.333" x:Name="txtStart"/>
<TextBox HorizontalAlignment="Left" Margin="90,108,0,0" VerticalAlignment="Top" Width="56" Height="24"
         Text="{Binding Source={StaticResource aniControl}, Path=End, Mode=TwoWay}"

자세한 코드 내용은 소스를 한번 보시구요.
모르는거 있으시면 연락 주세요 ^^.

관련 소스 :

Posted by gsi
:

[WPF] ColorScroll Demo

WPF Sample 2007. 11. 27. 13:13 |

ColorScroll

사용자 삽입 이미지

3개의 슬라이드 바를 사용해서 칼라 값을 조정하는 데모 입니다.
MultiBinding을 사용해서 3개의 슬라이드 바의 값을 합쳐서 RGB로 만들어 내는 방법입니다.
여기에는 IValueConverter 를 상속받아서 처리 하는 코드도 같이 포함되어 있습니다.

관련 코드 :

Posted by gsi
:

ProgressBar Demo

WPF Sample 2007. 11. 26. 13:06 |

Gsi ProgressBar Demo

사용자 삽입 이미지

Start 버튼을 누르면 프로그래스바가 100%까지 차는 모양을 도시해봤습니다.

- TextBlock의 값은 IValueConverter 를 사용해서 double의 값을 string형태로 변환했습니다.
- Rectangle을 사용해서 프로그래스바를 하나 작성했습니다.
- Rectangle의 Width의 속성을 사용해서 증가율을 표시 하고
   해당 증가율을 옆에 TextBlock로 하나 작성해서 뿌렸습니다.

바인딩은 Rectangle의 Width를 소스형태로 하고 TextBlock의 Text가 타겟형태로 구성
모드는 디폴트로 처리 했습니다.

관련 소스 :

Posted by gsi
:

GsiClock v0.1

WPF Sample 2007. 11. 22. 14:40 |

GsiClock v0.1


내용 : 시계
코드 기술 :
1. DependencyProperty 를 사용한 의존 프로퍼티 사용
2. DispatcherTimer 를 사용한 타이머 사용

관련 이미지 :
사용자 삽입 이미지
관련 소스 :
Posted by gsi
: