blend2009. 3. 12. 10:21
1.< 를 입력하고 Tab을 한번 누르면 자동으로 <!-- --> 가 입력되고 커서는 가운데 놓이게 됩니다.


2.<를 입력하고 아무렇게나 입력한뒤 Tab을 한번 누릅니다.


Posted by 동동(이재동)
blend2009. 1. 31. 14:59

안녕하세요 동동입니다.
 

제생에 첨으로 강좌를 쓰는데요 첫경험이니 모자르더라두 이해해주세요^^ 
 

DataGrid에 대해서 알아보겠습니다. 프로그래머라면 한번씩 써보았을 컨트롤인데요 특히 DB내용을 보여줄때 가장 많이 이용하는

콘트롤임에도 불구하고 국내에는 DataGrid Style 적용하는 방법을 찾기가 어려웠었습니다.

자 이제 DataGrid Control에 Style을 입혀봅시다. WPF 거의 모든 콘트롤 Style을 바꾸어 보았는데 DataGrid가 가장 어려웠던

기억이 납니다. (Selection Color와 Header Color,Header Padding, Scrollbar Color때문에)

그리고 무엇보다 기본 제공된 콘트롤이 아니여서 Template 버그등 에로 사항이 많았습니다.

수정이 어려웠던부분에서 막힐때는 상용을 살까라는 유혹도 있었지만 ^^

먼저  WPF에서 DataGrid Control이 기본적으로 들어있지 않기 때문에 상용 DataGrid Control 을 사서 설치 하거나

무료인 WPF ToolKit 을 설치하셔야 합니다. 저는 돈없는 학생이므로 ToolKit을 선택하였습니다.

다운로드는 이곳(링크) 에서 받으실수 있습니다.

설치하신후 처음에 DataGrid를 사용한 모습입니다.

정말 초라합니다.

이것을 나름 멋있게 Black 톤으로 색을 바꾸어보면

Header Color과 Header 사이에 Padding 값이 들어갔고 선색이랑 Background가 바뀌었습니다.

보이지는 않지만 Selection 색(선택했을때 RowColor), 스크롤 색도 바꾸었습니다.

여기서 DataGrid 기본적인 스타일을 바꾸어보도록하겠습니다.

기본적인 스타일은


DataGrid를 선택후 Properties 창에서 조절을 할수있습니다.

저의 경우는 언제든지 쓸수 있도록 App.xaml에 Style로 만들었습니다.(Style 만드는 방법은 아시죠?)

 <Style x:Key="dataGridBlack" TargetType="{x:Type Custom:DataGrid}">
                <Setter Property="RowBackground" Value="#171717" />
                <Setter Property="Foreground" Value="#FF999999" />
                <Setter Property="HorizontalGridLinesBrush" Value="#FF2F2F2F" />
                <Setter Property="VerticalGridLinesBrush" Value="#FF2F2F2F" />
                <Setter Property="RowHeight" Value="34" />
                <Setter Property="ColumnHeaderHeight" Value="34"/>
                <Setter Property="RowHeaderWidth" Value="0"/>
                <Setter Property="BorderBrush" Value="#FF2F2F2F"/>
                <Setter Property="MaxHeight" Value="400"/>
                <Setter Property="Background" Value="#FF171717"/>
                <Setter Property="CanUserAddRows" Value="false"/>
                <Setter Property="CanUserDeleteRows" Value="false"/>
                <Setter Property="IsReadOnly" Value="true"/>
                <Setter Property="AutoGenerateColumns" Value="False"/>   
  </Style>

이중 많이쓰는이는것을 설명하자면

RowBackground = grid 내부 색상(row)
foreground = grid 내부 글자 색상
HorizontalGridLinesBrush= grid 가로 줄 색상
verticalGridLineBrush = grid 세로 줄 색상

입니다.

자 이제 헤더를 수정해 봅시다.

DataGrid를 Select 한후 Object-Edit-OtherStyles-EditCoulmnheaderStyle-Create Empty를 선택합니다.

Key를 입력합니다 저는 알아보기 쉽도록 HeaderStyle을 이름을 정하고 app.xaml에 정의를 하였습니다.

자이제  app.xaml에서 HeaderStyle을 더블클릭하면


<Style x:Key="HeaderStyle"/>  

이 추가된것을 볼수 있습니다. 하지만 Blend에서 막상 수정하기 위해서 보면

이렇게만 나오고 아무것도 나오지 않습니다. 이것을 수정할수 있도록하기 위해서

이런식으로 바꾸어 줍니다.

 <Style x:Key="HeaderStyle" TargetType="{x:Type Custom:DataGridColumnHeader}">
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="Background" Value="#FF2F2F2F"/>               
                <Setter Property="BorderBrush" Value="#FF444444" />
                <Setter Property="BorderThickness" Value="0,1,1,1" />
                <Setter Property="Foreground" Value="#FF7E7E7E"/>
                <Setter Property="Margin" Value="0,0,0,0"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Stretch"/>
                <Setter Property="Padding" Value="10,0,10,0"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="FontWeight" Value="Normal"/>
                <Setter Property="FontFamily" Value="./Fonts\#Verdana"/>
                <Setter Property="FontSize" Value="13"/>
</Style>

자 이렇게 바꾸어주신후에야 비로소 Blend에서 app.xaml에서



Header를 수정할수있게 가능해졌습니다 위 Xaml에서 Property는 입력안하셔도 무방합니다 예를 보여주기 위해서 쓴것입니다.

자이제 스타일을 적용하는일만 남았습니다.



Object-Edit Other Style에서 - Edit Coulmn Header Style에서 아까 만든 HeaderStyle을 적용하시면 됩니다.

아니면 xaml에서 직접 정의 해주셔도 됩니다 저는 주로 이방법을 사용합니다.

<Custom:DataGrid  x:Name="CameraDataGrid" Style="{DynamicResource dataGridBlack}" ColumnHeaderStyle="{DynamicResource HeaderStyle}" Template="{DynamicResource DataGridControlTemplateBlack}"  CellStyle="{DynamicResource csDataGridCellStyle}" >

Style = 아까 정의한것처럼 기본적인  Style 정의
ColumnHeaderStyle = HeaderStyle 정의
Template = 좀있다가 배울 Scrollbar Style을 적용하기 위해서 사용할 Template입니다
CellStyle = dataGrid의 CellStyle정의입니다 선택했을때 Background ,Foreground를 설정하실수 있습니다.

이렇게 헤더까지 적용했는데 2장에는 DataGrid를 조금 더 깊이 파고들어서 Template 에서 스크롤바 Style을 바꾸고

Datagrid를 행을 선택했을때에 보이는 기본적인 파란색 행을 이쁘게 바꾸어보겠습니다. 그리고 DataGrid 에서 Template을

이용할시 버그가 있어서 더이상 Template 안쪽으로 들어가지 못한는 경우의 해결법도 알아보겠습니다.

혹시 DataGrid Header를 가운데 정렬하는법과 공간을 주는법을 알고 싶으신분은
 
블러그에 공개했으니 블러그를 참조하시면 됩니다.^^
Posted by 동동(이재동)
blend2009. 1. 29. 11:13
datagrid와 좀 다르게 listbox를 바꿀수 있지만 datagrid가 더 나은듯하다... 

app,xaml 이나 해당 xaml에 이걸 추가한다

<Style x:Key="listBoxItemStyle" TargetType="{x:Type ListBoxItem}">
 <Style.Resources>
  <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
   Color="Gray"/>
 </Style.Resources>  
</Style>

여기서 SystemColors.HighlightBrushKey 에 있는 color를 써야한다. 그렇게 하지 않고 rgb를 쓰면 투명도가 설정되어 있지않아

선택된 값이 보이지 않는다...

cs에서 하는 방법이 있긴하다 아래처럼

//색상을 생성
   SolidColorBrush brush = new SolidColorBrush(Colors.Green);
//투명도를 20%로
   brush.Opacity = 0.2;
//LIstBox Control의 Resource로 등록 SystemColors.HighlightBrushKey는 하이라이트 색상을 빨강으로 함....
   _list.Resources.Add(SystemColors.HighlightBrushKey, brush);
   _list.Resources.Add(SystemColors.HighlightTextBrushKey, new SolidColorBrush(Colors.Black));

하지만 xaml딴에서 해결하는게 나을듯하다.

listbox에 적용할때는

<ListBox IsSynchronizedWithCurrentItem="True" HorizontalAlignment="Stretch" Grid.ColumnSpan="1" Height="Auto" x:Name="listAlarmCameraList" DisplayMemberPath="strCameraName" Grid.Row="1" Style="{DynamicResource csListBox}"  ItemContainerStyle="{StaticResource listBoxItemStyle}"/>

이부분을 추가하면된다.
 ItemContainerStyle="{StaticResource listBoxItemStyle}"


text로 바꿀수 있는방법을 찾았다..ㅋㅋ

<ListBox> 
<ListBox.Resources> 
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="White"/> 
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/> 
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="White"/> 
</ListBox.Resources> 
</ListBox> 

controlBrushkey는 disable이거나 focus가 다른쪽으로 갔을때 색이다.

Posted by 동동(이재동)
blend2009. 1. 29. 09:49
먼저 app,xaml 이나 해당 xaml에  이 cellstyle을 넣는다. 색은 알아서 센스 있게 바꾼다.

<Style x:Key="csDataGridCellStyle" TargetType="{x:Type Custom:DataGridCell}">  
           <Style.Triggers> 
               <Trigger Property="IsSelected" Value="True">  
                   <Setter Property="Background" Value="Yellow" /> 
                   <Setter Property="Foreground" Value="Black"/>  
               </Trigger> 
               <Trigger Property="Custom:DataGridRow.IsFocused" Value="True">  
                   <Setter Property="Background" Value="Red" /> 
               </Trigger> 
           </Style.Triggers> 
</Style> 

이거를 적용하는건데

<Custom:DataGrid  x:Name="CameraDataGrid" Style="{DynamicResource dataGridBlack}" ColumnHeaderStyle="{DynamicResource HeaderStyle}" Template="{DynamicResource DataGridControlTemplateBlack}" CellStyle="{DynamicResource csDataGridCellStyle}" >

Template처럼 직접 datagrid에 넣으면 된다.

CellStyle="{DynamicResource csDataGridCellStyle}" 

코딩으로 넣으면 이렇게 넣으면 되지만 blend에서 스타일을 입힐려면

datagrid를 선택후
Object-Edit Other Styles-Edit CellStyle- Apply Resource 에서 아까 만들었던 csDataGridCellStyle 를 

선택하여 실행하면 색이 바뀐다.

Posted by 동동(이재동)
blend2009. 1. 9. 09:22
datagrid header에서 header 값이 없을시 크기가 크면 흰색이 보이는데 이것을 없애기 위해서 근 이틀동안 datagrid를 완전분석해

도 없었다 근데 오늘 아침에 아주쉽게 해결되었다 왜저쪽을 안보았는지 궁금하다.


이게 문제의 datagrid header쪽이다 header 가 2개인데 전체 width가 크기때문에 저쪽 색을 바꾸어야한다...


위에 이미지에 있는 깊이로 계속 edit template을 보면 Part_ColumnHeaderPresenter가 있다.

이것을 처음 edit copy를 해서 새로운 style을 만든뒤에



자 아래 이미지를 보면 datagridColumHeader가 있는데 이제 이것의 background를 바꾸어 보자

짜잔 이제 완성되었다.. ㅋㅋ


Posted by 동동(이재동)
blend2009. 1. 7. 09:57
   <Style x:Key="HeaderStyle2" TargetType="{x:Type Custom:DataGridColumnHeader}">
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="Background" Value="#FF202020"/>
                <Setter Property="BorderBrush" Value="#2f2f2f" />
                <Setter Property="BorderThickness" Value="1 1 1 1" />
                <Setter Property="Foreground" Value="#666666"/>
                <Setter Property="Margin" Value="0,0,0,0"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Stretch"/>
                <Setter Property="Padding" Value="0,0,0,0"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>                
            </Style>

저렇게 주면 된다 blend에서도 쉽게할수 있다...
리소스에서 headerstyle을 클릭한뒤에


여기를 적절히 조절하면 된다.
Posted by 동동(이재동)
blend2009. 1. 6. 10:32
Tab Control에 contents를 넣으면 강제적으로 마진값이 4로 설정되어 있다..

이걸몰랐으니 딴데서 삽질하는수밖에.....

디자인상 마진값을 없애려면

tabControl template에서 수정해야한다. 이렇게 들어간뒤 참고로 빨리 들어가기 위해서 난 tt를 두번누른다(팁)

Part_selectedContetHost에 보면 margin값이 4로 설정되어있는데 보니까 padding값이랑 binding 되어있는거 아닌가!!!!

그래서 결론은 구지 template edit 하지말고 tab control padding 값을 0,0,0,0으로 주면 된다......

괜히 삽질했네........ ㅠ.ㅠ 이거 글쓰면서 알아냄



Posted by 동동(이재동)
blend2009. 1. 5. 10:46

checkbox
radio
button
listbox

Posted by 동동(이재동)
blend2008. 12. 29. 11:03
 <Grid x:Name="LayoutRoot">
  <Button HorizontalAlignment="Left" Margin="115,-80,0,0" Style="{DynamicResource csButton}" Width="{Binding Path=ActualWidth, ElementName=grid, Mode=Default}" Height="26">
   <Grid Width="Auto" Height="Auto" x:Name="grid">
    <Grid.ColumnDefinitions>
     <ColumnDefinition MinWidth="29.28" Width="Auto"/>
     <ColumnDefinition MinWidth="90.72" Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Image Margin="5,0,4,0" VerticalAlignment="Center" Height="16" RenderTransformOrigin="1.425,1.524" Source="Button style2_1.png" Stretch="Fill"/>
    <TextBlock Margin="8,0,8,0" x:Name="textBlock" Foreground="#FF505050" TextWrapping="Wrap" d:LayoutOverrides="Height" VerticalAlignment="Center" Grid.Column="1" Text="Add iControl"/>
   </Grid>
  </Button>

예제 파일
Posted by 동동(이재동)
blend2008. 12. 26. 17:19

일단 내가 만든 datagrid control이다..




Scroll 부분 스타일은 template까지 들어가서 입혀야한다.



지금 현제 공용 app.xaml에 들어있는게 아니라 현재 page에 박혀있다 이거를 공용으로 빼자



cut을 해서 app.xaml쪽으로 Paste을 하거나 Drag&Drop해서 옮길수 일다.

끝...... 하지만 공용으로 빼낸 Template을 수정하기 위해서 edit Template을 하면 이런 에러가 난다..


그래서 수정하기 위해서는 일단 다시 해당 Page에서 작업을해야한다. 그러기 위해서 다시 원래대로 기존
App.xaml에 있는 Template Style을 cut이나 drag&drop을 해서 해당 페이지에 옮긴다.


옮길려고 하면 이런 MessageBox가 뜬다..
기본은 Break references / convert to local value 이다
Reset to Default Values 는 기존에 공용으로 적용했던 스타일을 원래대로 되돌리는거고 default로...

Don't fix는 아무것도 고치지 않는거다 나는 잠시 뺐다가 다시 공용으로 옮길것이기 때문에 don't fix로 한다...

원래대로 돌리면 하나하나 페이지들 다시 스타일 입혀줘야하기 때문이다..


다시 잘옮겨졌으니 edit해보자 여기서 edit하는게 아니라 꼭......


이쪽 Objects and Timeline 부분에서 edit을 해야한다 안그러면 또 에러난다.

이렇게 수정한뒤에 원래대로 공통으로 넣으면 된다.... 스크롤은 이렇게 빡시게 해야수정가능하다...
Posted by 동동(이재동)
blend2008. 12. 26. 17:04

일단 WPF ToolKit에서 제공하는 DataGrid를 수정하기 위해서는 2가지를 수정해야한다

기본적인것은 아주쉽다 그냥 Style하나 입혀놓고 Datagrid에서 지원해주는 properties를 하나의 스타일로 입히는것이다.

그냥 app.xaml에서

     <Style x:Key="dataGridBlack" TargetType="{x:Type Custom:DataGrid}">
                <Setter Property="RowBackground" Value="#171717" />
                <Setter Property="Foreground" Value="#FF999999" />
                <Setter Property="HorizontalGridLinesBrush" Value="#FF2F2F2F" />
                <Setter Property="VerticalGridLinesBrush" Value="#FF2F2F2F" />
                <Setter Property="RowHeight" Value="34" />
                <Setter Property="ColumnHeaderHeight" Value="34"/>
                <Setter Property="RowHeaderWidth" Value="0"/>
                <Setter Property="BorderBrush" Value="#FF2F2F2F"/>
                <Setter Property="MaxHeight" Value="500"/>
                <Setter Property="Background" Value="#FF171717"/>
            </Style>

이런식으로 dataGridBlack을 하나 만들어서 스타일을 적용하면 된다......

자이제 헤더를 입혀보자 헤더입히는법은 blend로는 이미 사용법을 썻었고

<Style x:Key="HeaderStyle" TargetType="{x:Type Custom:DataGridColumnHeader}">
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="Background" Value="#FF202020"/>
                <Setter Property="BorderBrush" Value="#2f2f2f" />
                <Setter Property="BorderThickness" Value="1 1 1 1" />
                <Setter Property="Foreground" Value="#666666"/>
                <Setter Property="Margin" Value="0,0,0,0"/>               
            </Style>

헤더 스타일을 정의를 이렇게 해놓으면 blend에 보여서 수정하면 된다

이제 제일 힘든 스크롤바

일단 template 을 정의 해야한다.


이렇게 dataGridBlack 이라는 스타일(datagrid의 색상이나 머 안의 선색상등 배경) DataGridControlTemplateBlack
이라는 template 2개가 check 되어있다... template가 머냐하면 어떤 control을 edit즉 속으로 들어가서 수정한 값의 스타일정의다

header값이랑 scrollbar 도 다 datagrid template 에서 수정한것이 때문에 template style을 정의해줘야 바뀐다.


일단 edit tempate을 해서 control 속을 보자


Part_verticalScroolBar가 세로 scrollbar이고 HorizontalScrollbar가 가로 scrollbar이다..

이제 edit해서 마음껏수정하면 된다........




Posted by 동동(이재동)
blend2008. 12. 18. 17:48
Posted by 동동(이재동)
blend2008. 12. 18. 11:29
1. 기존에 만든 버튼에 마우스오버 클릭시 색상이나 모양을 다르게 하기위해서 기존 Trigger를 삭제합니다.
   -Trigger버튼을 누르면 삭제가됩니다.



2. 모두 삭제후 새로운 Property를 생성합니다.
  

3. 마우스 오버시에 이벤트를 주기 위해서 Properties when active에서 Activated when - isMouse Over로 선택후 값을 True로 
   설정합니다.





4. 배경색을 바꾸기 위해서 Rectangle 선택후  배경색을 파란색으로 설정합니다.





Posted by 동동(이재동)
blend2008. 12. 18. 11:19

1. 프로젝트 생성후 Blend에서 버튼을 하나 만듭니다.


2. 버튼에서 오른쪽 버튼을 눌러서 Edit Control Parts(templete) - edit a copy를 누릅니다.




3. Button Name을 입력을 합니다. 저는 ButtonStyle_Red로 입력했습니다.


4. 왼쪽 하단에 보시면 Objects and Timeline이 보이는데 그쪽에서 Chrome 을 선택후 오른쪽버튼-delete(삭제)를 합니다.


5. 정상적으로 삭제 하셨다면 아무것도 없는 버튼이 나옵니다.



6. grid를 하나 추가한뒤 Width, height를 Auto로 줍니다.


7. contents control을 추가합니다.(c로 검색하면 쉽게 찾을수 있습니다 ^^)


8. 배경색을 주기 위해서 retangle 을 하나만들고 Width, Height 를 Auto로 Margin 을 0으로 줍니다(저같은경우 margin을
   xaml상에 서 지웁니다.)

9. 색을 칠하고 둥근 모서리를 만들기위해서 Appearance Menu에서 RadiusX,Y값을 15로 설정합니다.



10. 원하는 그림이 나오긴 했지만 배경색이 투명하지 않아 검은색이 보이는군요  투명하게 하기위해서
     Grid에서 backgroud 을 투명(no Brush)으로 만듭니다.



11. 버튼은 완성되었지만 버튼 글자가 없으므로 글자를 추가합니다. 일반적으로 TextBlock을 넣으면 되다고 생각하지만
     Contents Control과 ContentsPresenter를 이용하여야합니다.
     먼저 contents control과 contents Presenter를 생성합니다(margin 값은 당연히 0으로 주거나 삭제하고 가운데정렬.)
 
12. 만들어졌으면 ContentsPresenter를 드래그하여 Contents Control에 집어넣습니다. ContentsControl 하위에
     ContentsPresenter가 들어가도록 만듭니다.

13. 사실 ContentsControl을 Skip하고 ContentPresenter를 바로 넣을수는 있지만 ContentsPresenter에서 Foreground값을
     주지 못하기때문에 ContentsControl에서 Foreground값을 주어서 글자 색상을 변경할수가 있습니다. 저는 깔끔한 white
     를 선택하였습니다.



14. 자 이제 실행해봅시다. 이쁘지 않지만 버튼 모양이 바뀐것을 확인할수 있습니다.









Posted by 동동(이재동)