공공데이터 포털 API 이용 클라이언트 구현 Part 2
데이터 바인딩
AptTradeAPI를 통해 조회한 데이터를 Window.DataContext 속성에 바인딩 합니다.
1: private string CreateRequestUrl(string serviceKey, int pageNo, int numOfRows, string LAWD_CD, string DEAL_YMD)
2: {
3: string requestUrl = $"http://openapi.molit.go.kr/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTradeDev?ServiceKey={serviceKey}&pageNo={pageNo}&numOfRows={numOfRows}&LAWD_CD={LAWD_CD}&DEAL_YMD={DEAL_YMD}";
4: return requestUrl;
5: }
6: private void BindData()
7: {
8: // 인증키
9: string serviceKey = apiKeyTextBox.Text;
10: int pageNo = Convert.ToInt32(pageNoTextBox.Text);
11: int numOfRows = Convert.ToInt32(numOfRowsTextBox.Text);
12: string LAWD_CD = LAWD_CDTextBox.Text;
13: string DEAL_YMD = DEAL_YMDTextBox.Text;
14: string requestUri = CreateRequestUrl(serviceKey, pageNo, numOfRows, LAWD_CD, DEAL_YMD);
15: AptTradeAPI aptTradeApi = new AptTradeAPI();
16: TradeAptResult result = aptTradeApi.GetXmlData(requestUri);
17: DataContext = result;
18: }
Client Layout
요청 변수 입력
API 호출에 필요한 요청 변수를 입력 받을 수 있도록 항목 별로 텍스트 박스를 선언 합니다. 유효한 값 입력 후 조회 이벤트를 발생 시킬 버튼을 정의 합니다.
1: <!-- left content -->
2: <Border Grid.Column="0" Grid.Row="1" BorderBrush="#CCCCCC" BorderThickness="0,0,1,0">
3: <Grid>
4: <Grid.ColumnDefinitions>
5: <ColumnDefinition Width="20" />
6: <ColumnDefinition Width="Auto" />
7: <ColumnDefinition />
8: <ColumnDefinition Width="20" />
9: </Grid.ColumnDefinitions>
10: <Grid.RowDefinitions>
11: <RowDefinition Height="20" />
12: <RowDefinition Height="Auto" />
13: <RowDefinition Height="5" />
14: <RowDefinition Height="Auto" />
15: <RowDefinition Height="5" />
16: <RowDefinition Height="Auto" />
17: <RowDefinition Height="5" />
18: <RowDefinition Height="Auto" />
19: <RowDefinition Height="5" />
20: <RowDefinition Height="Auto" />
21: <RowDefinition Height="10" />
22: <RowDefinition Height="Auto" />
23: <RowDefinition Height="20" />
24: </Grid.RowDefinitions>
25: <Label Grid.Column="1" Grid.Row="1">API Key:</Label>
26: <TextBox Grid.Column="2" Grid.Row="1" Name="apiKeyTextBox" />
27: <Label Grid.Column="1" Grid.Row="3">Page No:</Label>
28: <TextBox Grid.Column="2" Grid.Row="3" Name="pageNoTextBox" />
29: <Label Grid.Column="1" Grid.Row="5">Num Of Rows:</Label>
30: <TextBox Grid.Column="2" Grid.Row="5" Name="numOfRowsTextBox" />
31: <Label Grid.Column="1" Grid.Row="7">지역코드:</Label>
32: <TextBox Grid.Column="2" Grid.Row="7" Name="LAWD_CDTextBox" />
33: <Label Grid.Column="1" Grid.Row="9">계약월:</Label>
34: <TextBox Grid.Column="2" Grid.Row="9" Name="DEAL_YMDTextBox" />
35: <Button Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="11" Width="100" Height="25" HorizontalAlignment="Right" Content="조회" Click="button_Click" />
36: </Grid>
37: </Border>
리스트뷰
조회 결과를 ListView 컨트롤을 이용해 데이터를 바인딩 하며 바인딩 된 데이터를 아파트 이름으로 그룹을 만들어 볼 수 있도록 체크 박스를 추가 합니다.
1: <!-- right content -->
2: <Border Grid.Column="1" Grid.Row="1" BorderBrush="#CCCCCC" BorderThickness="0" Margin="20" >
3: <Grid>
4: <Grid.RowDefinitions>
5: <RowDefinition Height="Auto" />
6: <RowDefinition />
7: </Grid.RowDefinitions>
8: <!-- Group CheckBox -->
9: <CheckBox Grid.Column="0"
10: Grid.Row="0"
11: Checked="AddGrouping"
12: Unchecked="RemoveGrouping">Group by Name</CheckBox>
13: <ListView Grid.Column="0"
14: Grid.Row="1"
15: Name="ListView"
16: ItemsSource="{Binding Items}"
17: ScrollViewer.VerticalScrollBarVisibility="Auto"
18: ScrollViewer.CanContentScroll="True"
19: GridViewColumnHeader.Click="GridViewColumnHeaderClick">
20: <ListView.View>
21: <GridView AllowsColumnReorder="True">
22: <GridViewColumn DisplayMemberBinding="{Binding Path=ApartName}"
23: Header="아파트" />
24: <GridViewColumn DisplayMemberBinding="{Binding Path=TradeMoney}" Header="거래금액" />
25: <GridViewColumn DisplayMemberBinding="{Binding Path=YearOfConstruction}" Header="건축년도" />
26: <GridViewColumn DisplayMemberBinding="{Binding Path=Year}" Header="년" />
27: <GridViewColumn DisplayMemberBinding="{Binding Path=TradeMonth}" Header="월" />
28: <GridViewColumn DisplayMemberBinding="{Binding Path=TradeDay}" Header="일" />
29: <GridViewColumn DisplayMemberBinding="{Binding Path=ExclusiveArea}" Header="전용면적" />
30: <GridViewColumn DisplayMemberBinding="{Binding Path=Floor}" Header="층" />
31: </GridView>
32: </ListView.View>
33: <!-- Group Style -->
34: <ListView.GroupStyle>
35: <GroupStyle>
36: <GroupStyle.ContainerStyle>
37: <Style TargetType="{x:Type GroupItem}">
38: <Setter Property="Margin" Value="0,0,0,5" />
39: <Setter Property="Template">
40: <Setter.Value>
41: <ControlTemplate TargetType="{x:Type GroupItem}">
42: <Expander IsExpanded="True" BorderBrush="#FFA4B97F" BorderThickness="0,0,0,1">
43: <Expander.Header>
44: <DockPanel>
45: <TextBlock FontWeight="Bold" Text="{Binding Path=Name}" Margin="5,0,0,0" Width="Auto" />
46: <TextBlock FontWeight="Bold" Text="{Binding Path=ItemCount, StringFormat=' ({0})'}" />
47: <!--<TextBlock Text="{Binding Path=Items, Converter={StaticResource GroupTradeMoneyConverter}, StringFormat=' {0:N0}'}" />-->
48: </DockPanel>
49: </Expander.Header>
50: <Expander.Content>
51: <ItemsPresenter />
52: </Expander.Content>
53: </Expander>
54: </ControlTemplate>
55: </Setter.Value>
56: </Setter>
57: </Style>
58: </GroupStyle.ContainerStyle>
59: </GroupStyle>
60: </ListView.GroupStyle>
61: </ListView>
62: </Grid>
63: </Border>
결과 화면
댓글
댓글 쓰기