코딩하는 핑구

지난번에 사용해본 새로운 인터넷 브라우저 WebView2의 다운로드 이벤트 처리하는 것을 다뤄봄

웹뷰2 방식을 사용한 인터넷 브라우저에서 파일을 다운로드 하는 경우,

자동으로 다운로드 폴더에 파일이 저장되는데

이때 FileSaveDialog 를 사용하여 사용자가 원하는 경로에 파일 저장할 수 있도록 커스터마이징 한 방식

파일 형식과 파일명은 다운로드할 때 자동으로 지정되는 형식과 파일명을 그대로 사용하였다

따라서 아래 방식으로는 저장할 때 파일 형식은 변경이 불가능한데 파일명만 가능한 상태로

형식 변경을 원하면 따로 수정해서 사용해줘야함

//웹뷰2 저장 경로 지정 커스터마이징
static string webSaveFilePath = "";

private bool? getSaveWebFilePath(string filePath)
{
	try
	{
		string fileExt = System.IO.Path.GetExtension(filePath).ToString();
		int strLen = fileExt.Length;

		webSaveFilePath = null;
		SaveFileDialog dlg = new SaveFileDialog();
		dlg.FileName = System.IO.Path.GetFileName(filePath).ToString();
		dlg.Filter = fileExt.Substring(1, strLen-1) + "|*" + System.IO.Path.GetExtension(filePath).ToString();

		bool? result = dlg.ShowDialog();

		if (result == true)
		{
			webSaveFilePath = System.IO.Path.GetFullPath(dlg.FileName).ToString();
		}
		return result;
	}
	catch (Exception ex)
	{
		Trace.WriteLine(ex.Message);
		return false;
	}
}


//웹뷰2 다운로드 이벤트 발생
private void WB_DownloadStarting(object sender, Microsoft.Web.WebView2.Core.CoreWebView2DownloadStartingEventArgs e)
{
	Microsoft.Web.WebView2.Core.CoreWebView2Deferral deferral = e.GetDeferral();
	string filePath = e.DownloadOperation.ResultFilePath;

	bool? saveResult = getSaveWebFilePath(filePath);
	
    //저장 취소 또는 오류 발생 시 저장 하지않음
	if (saveResult == null || saveResult == false)
	{
		e.DownloadOperation.Cancel();
		return;
	}
	System.Threading.SynchronizationContext.Current.Post((_) =>
	{
		using (deferral)
		{
			// Hide the default download dialog.
			e.Handled = true;
			e.ResultFilePath = webSaveFilePath;
		}
	}, null);
}

https://studyingpingu.tistory.com/77

저번글에 이어 조금더 완성도가 높아진 gridsplitter 글

그리드의 row, column의 영역을 마우스 드래그로 조절할수있는 gridsplitter 추가 예제

divideCnt만 정해주면 그만큼 gridsplitter 추가해주는 코드

public void divideRowAuto()
{	
	if (divideCnt == 0) return;

	double dividedHeight = mainGrid.Height / divideCnt;

	mainGrid.RowDefinitions.Clear();
	mainGrid.Children.Clear();

	//첫번째 로우
	RowDefinition row = new RowDefinition()
	{
		Height = new GridLength(dividedHeight, GridUnitType.Star),
		MinHeight = 30
	};
	mainGrid.RowDefinitions.Add(row);

	for (int i = 1; i <= (divideCnt - 1) * 2; i += 2)
	{
		RowDefinition row1 = new RowDefinition()
		{
			Height = new GridLength(15),
			MaxHeight = 15,
			MinHeight = 15
		};

		GridSplitter splitter1 = new GridSplitter()
		{
			VerticalAlignment = VerticalAlignment.Center,
			HorizontalAlignment = HorizontalAlignment.Stretch,
			ResizeBehavior = GridResizeBehavior.PreviousAndNext,
			Background = new SolidColorBrush(Colors.Red),
			Height = 2
		};
		mainGrid.RowDefinitions.Add(row1);
		mainGrid.Children.Add(splitter1);
		
		Grid.SetRow(splitter1, i);
		Grid.SetColumn(splitter1, 0);

		RowDefinition row2 = new RowDefinition()
		{
			Height = new GridLength(dividedHeight, GridUnitType.Star),
			MinHeight = 30,
		};

		mainGrid.RowDefinitions.Add(row2);
	}
}

코드 요약

gridsplitter는 독립된 row에 하나씩 배치된다

rowdefinition은 추가하면 이거 자체가 row다 보니 순서대로 추가가 되지만

gridsplitter를 생성한 다음 그리드에 추가하고 row를 세팅해줘야 분할하고자 하는 위치에 정확하게 추가된다

gridsplitter 1개가 생기면 row는 총 3개가 된다

6분할 예시 (divideCnt가 6인 경우 gridsplitter는 5개가 생성됨)

grid를 분할할수있는 RowDefinition과 분할 영역을 자유롭게 바꿀수있는

gridsplitter를 c# 코드적으로 생성하는 법을 기록해봄

이 방법을 응용하면 columndefinition에도 적용이 가능하다

gridsplitter란

진짜 말그대로 grid 영역 늘였다 줄였다 가능한 선

대충 사용하려는 grid는 위와같다

코드 영역을 주석으로 대강 설명해둔 코드들

mainGrid.RowDefinitions.Add(new RowDefinition
{
    //auto, star pixel로 Row의 height 지정 가능 
    Height = GridLength.Auto,
    
    //Height = new GridLength(1, GridUnitType.Star), 
    //1* 또는*과 같은듯 2*을 하고 싶다면 아래와 같이 적으면 됨
    //Height = new GridLength(2, GridUnitType.Star), 
    
    MinHeight = 15
    // 생성된 Row가 갖는 최소한의 높이 영역 값이 커질수록
    //각 Row가 갖는 영역의 height가 높아진다/넓어진다
});

height를 auto로 잡지 않으면 gridsplitter로 영역을 재분배해도 보이지않는 한계가 생긴다

만약 row가 3개이고 height 값들이 다 1*인 경우,

1을 3으로 나눈 영역까지만 이동되는 그런거

얇은 선으로 생겨서 마우스로 드래그하여grid 영역 조절이 가능한 gridsplitter

GridSplitter splitter = new GridSplitter()
{	
    //gridsplitter 선을 그리드 row 영역의 맨 위에 오게 함
    VerticalAlignment = VerticalAlignment.Top,
    
    //Row 영역에 gridsplitter를 생성하는 경우 stretch 속성을 사용하여
    //가로를 꽉차게 해주는 듯하다    
    HorizontalAlignment = HorizontalAlignment.Stretch,
    
    //ResizeBehavior 이건 조금 헷갈리는데 위아래로 그리드 영역을 넓히고 줄이고 싶으면
    //PreviousAndNext 이 값을 사용하면 되는듯 몇개의 값들이 더 있긴 한데
    //그건 본인 상황에 따라 다르게 쓰면 되겠다
    ResizeBehavior = GridResizeBehavior.PreviousAndNext,
    
    //gridsplitter 선 색
    Background = new SolidColorBrush(Colors.LightPink),
    
    //gridsplitter 두께
    Height = 5
};

	
    //메인 그리드에 생성한 splitter들을 추가해준다
    mainGrid.Children.Add(splitter);
    mainGrid.Children.Add(splitter2);
	
    //나는 각 컬럼 별 생성한 gridsplitter를 다르게 사용할 것이므로 다음과 같이
    //그리드의 Row 영역에 덧붙여 줬다
    Grid.SetRow(splitter, mainGrid.RowDefinitions.Count - 1);
    Grid.SetColumn(splitter, 0);

    Grid.SetRow(splitter2, mainGrid.RowDefinitions.Count - 1);
    Grid.SetColumn(splitter2, 1);

동적으로 생성한 gridsplitter를 메인으로 사용할 그리드에 추가하는 방법

아래는 최종 본 cs 코드

//추가한 gridsplitter 위아래로 자유롭게 이동됨, gridsplitter 잘 추가됨
private void addRow_Click(object sender, RoutedEventArgs e)
{
    mainGrid.RowDefinitions.Add(new RowDefinition
    {
        //auto, star pixel로 사이즈 지정 가능 
        Height = GridLength.Auto,
        //Height = new GridLength(1, GridUnitType.Star),
        MinHeight = 15
    });

    GridSplitter splitter = new GridSplitter()
    {
        VerticalAlignment = VerticalAlignment.Top,
        HorizontalAlignment = HorizontalAlignment.Stretch,
        ResizeBehavior = GridResizeBehavior.PreviousAndNext,
        Background = new SolidColorBrush(Colors.LightPink),
        Height = 5
    };

    GridSplitter splitter2 = new GridSplitter()
    {
        VerticalAlignment = VerticalAlignment.Top,
        HorizontalAlignment = HorizontalAlignment.Stretch,
        ResizeBehavior = GridResizeBehavior.PreviousAndNext,
        Background = new SolidColorBrush(Colors.LightGray),
        Margin = new Thickness(0, -8, 0, 0),
        Height = 20
    };

    mainGrid.Children.Add(splitter);
    mainGrid.Children.Add(splitter2);

    Grid.SetRow(splitter, mainGrid.RowDefinitions.Count - 1);
    Grid.SetColumn(splitter, 0);

    Grid.SetRow(splitter2, mainGrid.RowDefinitions.Count - 1);
    Grid.SetColumn(splitter2, 1);


    mainGrid.RowDefinitions.Add(new RowDefinition
    {
        Height = new GridLength(1, GridUnitType.Star)
    });
}

사용한 xaml 코드

<ScrollViewer>
    <Grid x:Name="mainGrid" Background="Salmon" Height="1500">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" MinHeight="25"/>                
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="0*" MinWidth="30" />
            <ColumnDefinition Width="0*" MinWidth="30" />
        </Grid.ColumnDefinitions>
        <Button x:Name="addRow" Click="addRow_Click" Width="40" Panel.ZIndex="12" Height="50" VerticalAlignment="Top">추가</Button>        
    </Grid>
</ScrollViewer>

현재 grid의 height의 경우 고정된 값으로 주었기때문에 동적으로 재조절해서 사용하면 되겠다

실행 예시

msdn 참고

출처 : https://social.msdn.microsoft.com/Forums/vstudio/en-US/8f9ad61f-3af6-44ef-a1a7-e14c8c323852/how-to-programmatically-create-and-attach-a-gridsplitter-to-a-grid?forum=wpf 

WPF TextBox에 TAB과 Enter를 이용한 편의기능 추가해보기

텍스트박스를 텍스트 에디터로 주로 사용할 때 필요한 기능

다이어리나 자기소개서처럼 많은 양의 입력을 전달받을 때에는
워드나 텍스트 파일에서 사용하는것처럼 TAB(탭)의 들여쓰기 기능과
Enter(엔터)로 다음줄로 연결되게 하는 줄바꿈 기능이 있으면 사용이 편해진다


이러한 편의 기능들을 텍스트박스에다 추가해본걸 기록해봄


먼저, 엔터(Return)키를 눌러 현재 문장의 다음줄로 이동할수있는 줄바꿈 기능을 추가해본다

<Grid>
	<Grid.RowDefinitions>
		<RowDefinition></RowDefinition>
		<RowDefinition></RowDefinition>
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
	</Grid.ColumnDefinitions>
        
	<TextBox Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Background="BlanchedAlmond" x:Name="textBox1"
	AcceptsReturn="True" AcceptsTab="True" ></TextBox>
</Grid>

바로 AcceptsReturn 값을 True로 지정해주는것

AcceptsReturn True를 지정해주지 않은 상태에서는 엔터를 마구 눌러도
텍스트박스에 새로운 줄로 이동하지 않는다 다만 옆으로 작성될 뿐이다

다음으로는 TAB 키를 누르면 Xaml의 다음 요소로 이동하는게 아니라
텍스트 입력창에서 들여쓰기가 가능해지게 하는 방법을 추가해본다

<TextBox Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Background="BlanchedAlmond" x:Name="textBox1"
AcceptsReturn="True" AcceptsTab="True" ></TextBox>

위의 내용 그대로에 AcceptsTab 를 True로 지정해주면 탭을 이용한 들여쓰기가 가능해진다

만약 키보드 입력 중간에 저장하는 단축키같이 Ctrl+S 두개 이상의 키보드 이벤트를 받을 필요가 있다면
아래의 글을 참고해보자

https://studyingpingu.tistory.com/61

에디터로 사용하는 텍스트 박스에 입력을 하면서 저장하는 단축키를 추가해주고 싶어서

Ctrl키와 S를 눌렀을 때 저장해주는 특정 함수를 호출하는 이벤트를 추가해봄

2개 이상의 단축키 지정 과정

1. Xaml 컨트롤인 텍스트박스에 키다운/키업 이벤트를 추가해준다

2. CS코드에서 키다운/키업 함수에 키보드 입력을 받는 부분을 추가해준다

3. Ctrl+S를 동시에 눌렀을 때, 사용하고싶은 함수를 호출해준다

먼저 사용중인 Xaml의 텍스트 블럭에 키보드 이벤트를 추가해준다

나중에 줄바꿈이 되는 텍스트 박스 글쓰기 (AcceptsReturn="True")
<!--<TextBox x:Name="textBox" AcceptsReturn="True" KeyDown="textBox_KeyDown" />-->

xaml 코드

<TextBox x:Name="textBox" KeyDown="textBox_KeyDown" />

cs 코드
키보드 입력을 받을 때 필요한 using문과 키다운 이벤트를 추가해주었다

using System.Windows.Input;

private void textBox_KeyDown(object sender, System.Windows.Input.KeyEventArgs e)
{
	if (e.Key == Key.S && Keyboard.Modifiers == ModifierKeys.Control)
  {                
      //ctrl+s 를 눌렀을 때 호출할 함수명
  }
}

마찬가지로 한가지의 키보드 입력만 받고싶을 때는 아래와 같이 진행하면 된다

using System.Windows.Input;

private void textBox_KeyDown(object sender, System.Windows.Input.KeyEventArgs e)
{
	if (e.Key == Key.S)
  {                
      //S 를 눌렀을 때 호출할 함수명
  } else if (e.Key == Key.Enter)
  {
  	//텍스트 입력 후 엔터로 호출할 함수명
  }
  
}

위의 코드는 텍스트를 입력 후 엔터로 다음단계를 진행하고싶을 때 추가해준 방식이다

KeyDown 등의 키보드 이벤트에는 PreviewKeyDown과 그냥 KeyDown 2개의 키보드 이벤트가 있는데

두개의 차이는 이것을 작성하면서 찾아보았으므로 다음에 기록할 예정

위의 영역에서 Keyboard.Modifiers라는 부분을 궁금해서 찾아본 결과

모디파이어 키들은 Modifier keys (Ctrl, Alt and/or Shift) 각각 컨트롤, 알트, 시프트 키를 얘기한다고 한다

참고 : 

키보드 2개 입력 (ctrl + s)
https://stackoverflow.com/questions/26361441/how-do-i-detect-ctrl-s-in-a-window-in-c-my-eventargs-dont-have-e-modifiers

wpf 샘플예제를 돌려보면서 코드를 구경하려고 하다가 빌드 에러를 마주한 이야기

빌드 환경 : Visual studio 2019

위 이미지처럼 지정된 버전이 없어서 빌드가 안된다는 오류가 발생했음

당황하지말고 구글에 물어보니 친절한 MS가 미리 작성해둔 페이지를 찾을수있었다

원인은 3가지 정도로 요약되어있다

1. global.json 파일에 지정된 sdk 버전이 잘못된 경우

2. global.json 파일에 지정되어있는 sdk 버전이 빌드하려는 PC에 설치되지 않은 경우

3. global.json 파일에 지정된 sdk 버전의 경로가 잘못되어 찾지 못한 경우

정도라고 한다

이 오류를 해결하기 할수있는 4가지 방법이 나와있다

1. global.json에 지정된 sdk 버전을 설치

2. global.json에 수동으로 다른 sdk버전을 지정해주기

3. global.json에 오타나 다른 문제가 있는지 올바른 global.json 구조를 보고 오타나 기타 문제 파악하기

4. global.json 삭제해서 설치된 최신버전의 sdk가 동작되도록 하기

(나는 개인적으로 돌려본것이므로 팀단위로 개발을 진행하고 있다면 확인이 필요할듯하다)

그래서 먼저 확인해본 나의 global.json 파일

※참고로 global.json 파일의 경로는

WPF-Samples-master 폴더에 바로 위치해있어 찾기는 어렵지않다

global.json에 지정된 sdk 버전은 3.1.301이다

cmd 창을 열어 dotnet --info를 입력해주면

내 pc에 설치된 닷넷 sdk 버전들을 확인할수있다

//설치된 sdk 버전 확인
dotnet --info

나는 이미 설치하고 버전을 확인해본 경우라 3.1.414의 sdk 버전이 설치된것을 확인할수있다

닷넷 sdk를 설치하기 위해

다시 친절한 구글에 .net sdk 3.1.301 을 검색해주면

알아서 다운로드 페이지를 상단에 띄워준다

sdk 설치 페이지

https://dotnet.microsoft.com/download/dotnet

.net 3.1 sdk 중에서 가장 최신 릴리즈 버전이 3.1.414 버전인듯함

설치가 완료된 이후에 빌드를 해줬더니 오류없이 잘 실행되었다

출처 :

https://github.com/microsoft/WPF-Samples

https://docs.microsoft.com/ko-kr/dotnet/core/install/windows?tabs=net50 

wpf에서 특정 버튼 클릭 시,

외부 프로그램을 실행하는게 필요해서

현재 진행되고있는 프로그램에서 외부의 특정 프로그램, 프로세스를 호출하는법을 찾아보았다

방법은 생각보다 간단한데 관련된 옵션에대한 이해가 조금 부족해서 초반에 힘들었다

지금도 낯설긴 함

Process ps = new Process();
ps.StartInfo.FileName = "VideoRecorder.exe";
ps.StartInfo.WorkingDirectory = "c:\\pingu";
ps.StartInfo.WindowStyle = ProcessWindowStyle.Normal;
ps.Start();

만약 내가 c드라이브의 pingu라는 폴더에 있는 VideoRecorder.exe라는 프로그램을

현재 실행중인 프로그램에서 불러오고 싶다면 위와같이 코드를 작성해주면 된다

c:\\에서

\가 하나 더있는 이유는 \문자 escape 때문임

windowstyle의 경우 호출한 외부의 프로그램이 나타나게될 형태이다

최소화, 최대화, 정도가 있고

그냥 보통 창이 열리듯 윈도우화면에 보이는게 위에 내가 사용한 Normal 값이다

나는 딱 필요한 옵션만을 사용하였고 아래 사이트를 참고하면

더 다양한 옵션들이 많으니 필요에 따라 취사선택하자

참고 : https://docs.microsoft.com/ko-kr/dotnet/api/system.diagnostics.processstartinfo?view=net-5.0 

내문서 폴더에 파일을 저장해야해서 찾아본 폴더 경로 가져오는법

보통 파일을 컴퓨터에 저장할 때, 그 경로를 자동으로 저장하는 방식을 사용할때가 있고

사용자가 매번 지정해서 저장하게 하는 방식을 사용하는데

자동으로 특정 폴더에 파일을 저장했어야해서 찾아본 방식

당장 필요한 경로는 내문서 폴더였는데 찾아본 사이트에 웬만큼 사용하는 시스템 폴더 경로들이 많이있어서

한꺼번에 공유해본다

내문서 경로 가져오는법 예시

string path = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);
// path = 내문서

string outputFolder = path + @"\Pingu\Video";
// outputFolder = 내문서\Pingu\Video

만약 내문서 폴더안에 있는 특정 폴더를 지정해주고 싶다면

위의 outputfolder 처럼 사용해주면 된다

이때 특정 폴더가 존재하지않는 경우 에러가 나거나 프로그램이 종료될수있으니

미리 폴더의 유무를 확인하고 사용해야되겠다

Environment.GetFolderPath(Environment.SpecialFolder.사용하고 싶은 디렉토리 지정);

아래는 내컴퓨터, 비디오, ProgramFilesX86 등의 사용자 데스크탑 폴더 경로를 가져오는 방법

참고 : 

https://docs.microsoft.com/ko-kr/dotnet/api/system.environment.specialfolder?view=net-5.0#System_Environment_SpecialFolder_Personal 

먼저,

ico 파일이 없다면 png, jpg 등 이미지 파일을 ico 파일형식으로 변환해주는

온라인 컨버터 사이트에 접속해서 먼저 ico 파일을 만든다

구글링 시 나오는 아무사이트나 방문하면 됨

포토샵으로도 가능하지만 포토샵이 없어서 온라인 사이트 방문해야됨

※방법 자체는 어렵지 않은데 처음해보거나 어디인지 위치를 까먹으면 몰라서 못함

텍스트 설명

프로젝트 우클릭 -> 속성 -> 응용프로그램 탭에서 아이콘 및 매니페스트의 아이콘 찾아보기

-> 컴퓨터에 있는 로컬 ico 선택 -> 변경완료

사진 설명

ico 파일을 선택하면 찾아보기 버튼 옆에 입력한 ico 파일이 적용된 모습을 확인할수있다

프로그램 실행 시 아이콘이 적용된 모습

최근 만들어본 WPF 텍스트출력에 쌍따옴표 ("), 일명 double quotes가 필요해서 사용가능한 방법을 찾아보다가

생각보다 간단하지만 외우긴 힘들어서 박제함

늘 그렇듯 스택오버플로우에도 해답이있다

+MSDN에도 있고

문서와 스택오버플로우의 답변에 적혀있는 대로

싱글 쿼트를 사용하려면

• &apos;

쌍따옴표/더블쿼트를 사용하려면

• &quot;

를 사용해주면 된다

<!--사용 예시-->
<TextBlock FontSize="20" Text=" &quot; 입니다."></TextBlock>

위의 사용 예 처럼 입력하면 "입니다.가 출력된다

"를 사용하고 싶은 자리에 &quots; 를 사용해주면 됨

기타 특수문자를 사용하고 싶다면 아래 사이트 방문

참고사이트 :