c# wpf 에서 탭콘트롤 사용시 웹뷰를 컨텐트로 사용할때...

Question

c# wpf 에서 탭콘트롤을넣고 동적으로_tabItems = new List(); _tabAdd = new TabItem(); _tabAdd.Header = "+"; tabItems.Add(_tabAdd); this.AddTabItem(); tabDynamic.DataContext = _tabItems;넣고 TabItem tab = new TabItem(); tab.Header = string.Format("Tab {0}", count); tab.Name = string.Format("tab{0}", count); tab.HeaderTemplate = tabDynamic.FindResource("TabHeader") as DataTemplate; tab.MouseDoubleClick += new MouseButtonEventHandler(tab_MouseDoubleClick); TextBox txt = new TextBox(); txt.Name = "txt"; tab.Content = txt;_tabItems.Insert(count - 1, tab);tabDynamic.DataContext = _tabItems; // select newly added tab item tabDynamic.SelectedItem = tab;이렇게 동적으로 탭을생성해서 추가하고 추가한탭을 선택하면private void tabDynamic_SelectionChanged(object sender, SelectionChangedEventArgs e) { TabItem tab = tabDynamic.SelectedItem as TabItem; if (tab == null) return; if (tab.Equals(_tabAdd)) { } else { // 여기로 넘어오는데 } }정상적인 선택한탭을 넘겨받은 핸들러가 호출됩니다근데TextBox txt = new TextBox(); txt.Name = "txt"; tab.Content = txt;이것을 WebView2 newWebView = new WebView2(); newWebView.Source = new Uri("https://www.bing.com"); // 초기 URL 설정 tab.Content = newWebView;이렇게 탭콘텐츠를 웹뷰로 바꿔서 tabDynamic.SelectedItem = tab;선택하면private void tabDynamic_SelectionChanged(object sender, SelectionChangedEventArgs e) { TabItem tab = tabDynamic.SelectedItem as TabItem; if (tab == null) return; if (tab.Equals(_tabAdd)) { // 여기로 넘어옵니다 } else { } }이유좀 알수없을까요?왜 선택도 안한탭으로 넘어올까요해결방법좀 부탁합니다

네오스카이 · Answer

원인 분석WPF에서 TabControl의 TabItem에 WebView2를 동적으로 넣을 때, 탭 선택 이벤트가 정상적으로 동작하지 않고, 선택하지 않은 탭(예: “+” 탭 등)으로 SelectionChanged가 넘어가는 현상은 주로 다음과 같은 이유에서 발생합니다:WebView2의 비동기 초기화: WebView2는 내부적으로 비동기적으로 초기화되며, 초기화가 완료되기 전에 TabItem의 Content로 할당하거나, TabControl에 추가하면 내부적으로 포커스, 선택, 렌더링 이벤트가 꼬일 수 있습니다.바인딩 및 컬렉션 관리: TabControl의 ItemsSource에 List을 직접 바인딩하면, WPF의 데이터 바인딩 및 UI 요소 관리 방식과 충돌이 발생할 수 있습니다. 일반적으로 ViewModel 객체(예: ObservableCollection)를 바인딩하고, DataTemplate로 Content를 그려주는 방식이 더 안정적입니다.WebView2의 특성: WebView2는 Win32 기반의 WebView 컨트롤로, WPF와의 상호 운용에서 포커스, 입력 이벤트 등에서 특이한 동작을 보일 수 있습니다35.해결책1. WebView2의 초기화 보장WebView2를 TabItem에 넣기 전에 반드시 EnsureCoreWebView2Async()로 초기화를 완료하세요.예시:csharp var webView = new Microsoft.Web.WebView2.Wpf.WebView2(); await webView.EnsureCoreWebView2Async(); webView.Source = new Uri("https://www.bing.com"); tab.Content = webView;var webView = new Microsoft.Web.WebView2.Wpf.WebView2(); await webView.EnsureCoreWebView2Async(); webView.Source = new Uri("https://www.bing.com"); tab.Content = webView;이렇게 하면 WebView2가 완전히 준비된 후에만 TabItem의 Content로 할당됩니다35.2. TabControl의 ItemsSource 바인딩 개선List을 직접 바인딩하지 말고, ObservableCollection 등 ViewModel 컬렉션을 사용하세요.TabItem 대신 CustomTabModel(예: Header, Content 속성 포함)로 관리하고, DataTemplate을 사용해 Content를 렌더링하세요2.예시 모델:csharp public class TabItemModel { public string Header { get; set; } public object Content { get; set; } }public class TabItemModel { public string Header { get; set; } public object Content { get; set; } }XAML:xml 3. Tab 추가/선택 로직 개선탭을 추가할 때 다음과 같이 하세요:csharp var webView = new Microsoft.Web.WebView2.Wpf.WebView2(); await webView.EnsureCoreWebView2Async(); webView.Source = new Uri("https://www.bing.com"); var newTab = new TabItemModel { Header = $"Tab {count}", Content = webView }; Tabs.Insert(Tabs.Count - 1, newTab); // "+" 탭 앞에 삽입 SelectedTab = newTab; // ViewModel에서 선택된 탭 관리var webView = new Microsoft.Web.WebView2.Wpf.WebView2(); await webView.EnsureCoreWebView2Async(); webView.Source = new Uri("https://www.bing.com"); var newTab = new TabItemModel { Header = $"Tab {count}", Content = webView }; Tabs.Insert(Tabs.Count - 1, newTab); // "+" 탭 앞에 삽입 SelectedTab = newTab; // ViewModel에서 선택된 탭 관리이렇게 하면 SelectionChanged 이벤트에서 항상 올바른 탭이 선택됩니다.4. 기타 팁WebView2는 Loaded 이벤트에서 초기화하는 것도 한 방법입니다5.TabControl의 SelectionChanged에서 e.OriginalSource, e.AddedItems, e.RemovedItems를 활용해 실제 선택된 탭을 추적하세요.TabControl의 DataContext를 컬렉션 전체가 아니라 ViewModel에 맞게 세팅하세요.정리WebView2는 반드시 초기화 후 Content로 넣으세요35.TabItem을 직접 바인딩하지 말고, ViewModel 컬렉션과 DataTemplate을 사용하세요2.TabControl의 SelectionChanged에서 선택된 탭을 명확히 추적하세요.이렇게 하면 WebView2를 포함한 동적 탭 추가 시 SelectionChanged가 정상 동작합니다.추가적으로, WebView2의 비동기 특성과 WPF 바인딩 구조를 고려하는 것이 핵심입니다.Citations:https://chashtag.tistory.com/entry/CWPF-WebView2-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95-WebBrowser-%EB%8C%80%EC%B2%B4-JS%ED%86%B5%EC%8B%A0https://wpfstory.tistory.com/1https://ppost.tistory.com/entry/WPF-%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98%EC%97%90%EC%84%9C-WebView2-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-%EA%B8%B0%EC%B4%88-%EC%82%AC%EC%9A%A9%EB%B2%95%EA%B3%BC-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0https://blog.naver.com/monkeychoi/222803720243https://studyingpingu.tistory.com/85https://learn.microsoft.com/ko-kr/dotnet/desktop/winforms/controls/how-to-add-and-remove-tabs-with-the-windows-forms-tabcontrolhttps://skillfromthesky.tistory.com/15https://learn.microsoft.com/ko-kr/windows/apps/design/controls/web-viewPerplexity로부터의 답변: pplx.ai/share

c# wpf 에서 탭콘트롤 사용시 웹뷰를 컨텐트로 사용할때...

1개의 답변

#wpf 목록