블로그 이미지
* Microsoft MVP - Windows Development 2014 ~ 2019 5ring https://www.facebook.com/groups/w10app/ kaki104

카테고리

List All (587)N
Blazor (1)N
Windows App(Universa.. (97)
Xamarin Forms (4)
Bot Framework (19)
Azure (9)
Windows 10 (52)
WPF (4)
Facebook News & Tips (158)
Windows 8&8.1 (113)
Windows Phone 8 (42)
Silverlight (37)
HTML5 & MVC4 (16)
Portable Class Library (2)
Uncategorised Tips a.. (3)
Kinect for Windows (2)
ETC (12)
kaki104 Scrap (4)
App News (11)
Total533,854
Today0
Yesterday21

* Part 7


* AutoSuggestBox
* CommandBar
- AppBarButton
- AppBarElementContainer




소스
https://github.com/kaki104/PrismSample

Posted by MVP kaki104


상세 페이지 구현 핵심 정리


* 상세 데이터 조회
* Layout Control - Grid, StackPanel, RelativePanel, Canvas
* TextBlock - HeaderedContentControl
* Image - ImageEx
* XAML design magic!!





소스


https://github.com/kaki104/PrismSample



Posted by MVP kaki104


Part 5

Prism으로 시작하는 UWP app Part5 - View에서 ViewModel로 사용자 인터렉션 연결하기

 

* SelectedItem

* SelectionChanged

* INavigationService

 

소스

https://github.com/kaki104/PrismSample





Posted by MVP kaki104

Part4


- View와 ViewModel 연결 방법
- ViewModel의 데이터를 View에 출력하기
- ItemsSource
- DataGrid


소스

https://github.com/kaki104/PrismSample




Posted by MVP kaki104


Part3 - 데이터 조회


- OMDb API 사용하기
- 화면 추가
- Json데이터로 Model 만들기
- JsonProperty 사용하기
- Add new feature, Settings Storage
- HttpClient로 데이터 조회하기




소스


https://github.com/kaki104/PrismSample


Posted by MVP kaki104


Part2 기본 화면 추가하기


- Windows Template Studio 다이얼로그를 이용해서 화면 추가
- TextBlock과 Button을 추가
- MVVM 패턴의 맛보기 Binding 약간, Command 약간



소스


https://github.com/kaki104/PrismSample


* 질문이나 다루었으면 하는 내용들은 유투브에 리플로 남겨주시면.. 최대한 알아보고 아는 만큼만 설명드리도록 하겠습니다.





Posted by MVP kaki104


2019년 UWP앱 개발을 시작할 때가 되었습니다.


기본적인 내용을 공부하고 접근하면 너우 오래 걸릴 수 있습니다. 그래서, 일단 만들고 각자 이론 공부하시는 것으로 방향을 잡았습니다.


일주일에 한편씩은 업로드 하도록 노력하겠습니다. 그리고, 질문이나 다루었으면 하는 내용들은 유투브에 리플로 남겨주시면.. 최대한 알아보고 아는 만큼만 설명드리도록 하겠습니다.


감사합니다.


part100번까지 가보도록 하죠;;




소스


https://github.com/kaki104/PrismSample


Posted by MVP kaki104
TAG #prism, #uwp



UWP앱 개발을 시작하는 가장 좋은 방법은 Windows Template Studio로 시작하는 것입니다. 이번에 WTS 3.0 버전이 정식 릴리즈 되었습니다.


WTS 소스에 관심이 있으시면 WTS's GitHub를 방문하세요.



0. 참고 

Windows Template Studio 3.0 released!



1. 포함된 내용


- 새로운 프로젝트를 생성하면, 하나의 솔루션에 UWP 프로젝트와 .NET Core 프로젝트로 나누어서 생성됩니다.

- 마우스 오른쪽 버튼으로 새 프로젝트 추가 지원

- 수평 탐색보기가 피벗 탐색 패턴으로 변경됩니다.

- MVVMLight 패턴이 .NET Standard를 사용하도록 업데이트 되었습니다.

- 기타 버그 수정



2. 업데이트 방법


- 이미 설치되어 있는 경우 : Tools -> Extensions and Updates 로 이동합니다. 그런 다음 왼쪽의 Updates expander를 선택하시고 Windows Template Studio 를 선택 후 Update를 클릭하시면 됩니다.

- 미설시 : 



Online -> 검색창에 windows template studio -> download 버튼 클릭 -> Visual Studio 종료



3. 다음 추가 예정 내용


- 메뉴바 네비게이션 패턴 템플릿

- 로그인 아이덴티

- 향상된 Visual Studio 2019 서포트 

- Azure 기능들을 추가하기 시작

- Unit Test 프로젝트



4. 커뮤니티와의 파트너십을 통해 계속해서 새로운 기능을 추가 하고 있네요, 오픈 소스 프로젝트에 관심이 있는 분들의 많은 참여를 부탁드립니다. https://aka.ms/wts


기능 추가나 아이디어는 여기를 통해서 작성하시면 됩니다.





Posted by MVP kaki104

UWP앱들을 보면 검색 버튼을 클릭하면 택스트 박스가 출력되는 UI를 자주 볼 수 있습니다.


음..기본으로 제공되는 줄 알았는데..그러지는 않더군요..ㅋㅋ

간단하게 만들어보았습니다.


1. XAML


<Page>

    <Page.Resources>

        <Style x:Key="SearchBoxStyle" TargetType="FlyoutPresenter">
            <Setter Property="Margin" Value="78,0,0,0"/>
            <Setter Property="Padding" Value="5"/>
            <Setter Property="Height" Value="50"/>
        </Style>

    </Page.Resources>

    <Grid>


        <CommandBar Background="Transparent" IsOpen="False" DefaultLabelPosition="Right">
            <AppBarButton Icon="Find" Label="Find">
                <AppBarButton.Flyout>
                    <Flyout Placement="Left" FlyoutPresenterStyle="{StaticResource SearchBoxStyle}"
                            Opened="FlyoutBase_OnOpened">
                        <AutoSuggestBox x:Name="SuggestBox" PlaceholderText="Input words to search" AllowFocusOnInteraction="True" />
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>

            <AppBarButton Icon="Add" Label="Add" Command="{Binding AddCommand}"/>
        </CommandBar>

    </Grid>

</Page>



2. XAML.CS


        private void FlyoutBase_OnOpened(object sender, object e)
        {
            SuggestBox.Focus(FocusState.Programmatic);
        }



3. 설명


여기서 핵심은 AppBarButton의 Flyout을 이용해서 툴팁 같은 팝업을 출력하는 것입니다. 그 내부에 메뉴도 넣을 수 있고, 머 여러가지로 활용을 하는데.. 이번에는 AutoSuggestBox를 집어 넣은 것입니다.


AutoSuggestBox가 Windows 10의 기본 검색 컨트롤이라고 하네요..음..SearchBox 컨트롤도 존재하지만, 이전 버전에서 사용되는 컨트롤이라...


검색 버튼을 누르기전




검색 버튼을 누른 후


검색 버튼을 누른 후 포커스를 넣기 위해서 CS에서 코딩을 하나 했습니다.

CS 코딩이 싫은 분들은 Behavior를 만들어서 사용하시면 됩니다.


Posted by MVP kaki104