Still alive?

[Danielx64]

Hi,

I just wanted to find out if this is still alive. I currently have a project (it's on github) that uses the default out of the box wpf tab control and it sucks.

I saw this project and felt that this would be the right fit.

Also will this work when i'm not using MVVM of any kinds?

Please let me know if you want the url to the project (it's not that big) and see if it can be an easy drop-in replacement.

Cheers

[sskodje]

I'm regarding this project as completed, so it's not being actively developed. To use it you must use data binding to a collection of objects representing your tabs, as well as ICommands for actions like new tab or close tab, but you don't need separate viewmodels. You can chuck everything in code behind if you want.

[Danielx64]

I'm regarding this project as completed, so it's not being actively developed. To use it you must use data binding to a collection of objects representing your tabs, as well as ICommands for actions like new tab or close tab, but you don't need separate viewmodels. You can chuck everything in code behind if you want.

Hi there,

Thank you for your response. I'm going to give this a go, and hopefully I end up with a better outcome than I did from this stackoverflow post.

While I respect that this project is marked completed and not actively developed, will you still be able to provide help if I run into trouble?

Cheers

[sskodje]

Yeah sure, just ask if you have any questions. I've been using this in one of my own projects for years, and it has been quite stable for my use.

[Danielx64]

Awesome, the demo that you have is really cool and if I can get to it work with my custom browser, it will make the company that I work for happy (currently the app that is in production is a simple kiosk type browser based on webview2 with a few tricks under it's sleave to handle custom URL schema and currently if you click on one of those link and the app is already running, it will detect that it's already running and replace the current page).

So, the plan is to add multi tabbing with the option to create new tabs that would load the default page that I set. Additionally (I already have code for most of this) if someone clicks on one of those magic links, I would like it to open that link in a new tab.

So far, I have done the following:

• Created a new branch on github for this transformation from the draft I have
• Added the NuGet package for WPFChromeTabsMVVM
• Ripped out the current wpf tab in MainWindow.xaml and added the following (I coped this from the demo app) xmlns:ct="clr-namespace:ChromeTabs;assembly=ChromeTabs" and

		<ct:ChromeTabControl x:Name="tabControl1"
                             MaximumTabWidth="200"
                             TabPersistBehavior="Timed"
                             TabPersistDuration="0:0:0:5"
                             AddTabButtonBehavior="OpenNewTab"
                             Background="AliceBlue"
                             ItemsSource="{Binding Path= WebView2Tabs, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}"
                             SelectedItem="{Binding SelectedTab}"
                             SelectedTabBrush="WhiteSmoke"
                             CanMoveTabs="True"
                             DragWindowWithOneTab="True"
                             IsAddButtonVisible="True"
                             AddTabCommand="{Binding AddTabCommand}"
                             CloseTabCommand="{Binding CloseTabCommand}"
                             ReorderTabsCommand="{Binding ReorderTabsCommand}">

			<!--We override the control template here to show how you can modify the properties of tab panel and content presenter-->
			<ct:ChromeTabControl.Template>
				<ControlTemplate TargetType="{x:Type ct:ChromeTabControl}">
					<Grid>
						<Grid.RowDefinitions>
							<RowDefinition Height="30" />
							<RowDefinition Height="*" />
						</Grid.RowDefinitions>
						<Border Background="{TemplateBinding Background}"
                                BorderThickness="0,0,0,1"
                                BorderBrush="#FF999999"
                                Grid.Row="0"
                                Padding="10,5,10,0">
							<ct:ChromeTabPanel IsItemsHost="True"
                                               Background="{TemplateBinding Background}" />
						</Border>

						<Grid Grid.Row="1"
                              Visibility="Visible">
							<ContentPresenter Content="{TemplateBinding SelectedContent}" />
						</Grid>
						<Grid x:Name="PART_ItemsHolder"
                              Grid.Row="1"
                              Visibility="Visible" />
					</Grid>
				</ControlTemplate>
			</ct:ChromeTabControl.Template>
			<!--We must override the item template to show our tab name in the header. Here we use a simple
            textblock, but you could put any combination of controls here. Uncomment the orange border to show
            the bounds of the header content presenter-->
			<ct:ChromeTabControl.ItemTemplate>
				<DataTemplate>
					<Grid Tag="{Binding RelativeSource={RelativeSource AncestorType={x:Type ct:ChromeTabItem}}}">

						<!--<Border BorderBrush="Orange"
                                BorderThickness="1">-->
						<StackPanel Orientation="Horizontal"
                                    Background="Transparent">
							<TextBlock Text="test title"
                                       TextWrapping="NoWrap"
                                       TextTrimming="CharacterEllipsis"
                                       VerticalAlignment="Center" />
						</StackPanel>
						<!--</Border>-->

						<!--We can implement a context menu for the header here. The ChromeTabItems expose for convenience the following commands, "CloseTabCommand: close the current tab, "CloseAllTabsCommand", and "CloseOtherTabsCommand", which closes all tabs except the current.-->
						<Grid.ContextMenu>
							<ContextMenu>
								<MenuItem Header="Close"
                                          Command="{Binding Path=PlacementTarget.Tag.CloseTabCommand, RelativeSource={RelativeSource AncestorType=ContextMenu}}"
                                          CommandTarget="{Binding Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
								<MenuItem Header="Close all"
                                          Command="{Binding Path=PlacementTarget.Tag.CloseAllTabsCommand, RelativeSource={RelativeSource AncestorType=ContextMenu}}"
                                          CommandTarget="{Binding Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
								<MenuItem Header="Close other tabs"
                                          Command="{Binding Path=PlacementTarget.Tag.CloseOtherTabsCommand, RelativeSource={RelativeSource AncestorType=ContextMenu}}"
                                          CommandTarget="{Binding Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                                          CommandParameter="{Binding}" />

							</ContextMenu>
						</Grid.ContextMenu>
					</Grid>
				</DataTemplate>
			</ct:ChromeTabControl.ItemTemplate>
		</ct:ChromeTabControl>

• in MainWindow.xaml.cs I added in (what I thought was in the right direction but may have over done it) and I am unsure on a few areas (C# isn't my main area - see below):

1. Right now I have a tab with nothing on it. What would be the best way to create a template that would be used on every tab? Each tab would only need its own webview2 instance and nothing else.
2. I already have code to handle what I want to happen when a tab is closed (everything is in that MainWindow.xaml.cs file), I'm not sure how to translate it to the new menu system. I know I need to bind it to CloseTabCommand, just not sure on the code I need.
3. Likewise, I know I need to setup AddTabCommand and I think this is linked to point 1 - not sure what direction to go in to handle this. Bonus points if itpossible to dfine a URL to be loaded when the new tab is added - there's a few cases where a different url (rather than the default) is needed.

Also, in MainWindow.xaml.cs I cleaned out some of the code that was used from the crap wpf tabbing system and added a few comments in there as well.

I know this maybe be a mouth full, coding in c# isn't my regular job - I basically went from not knowing a thing about wpf (years ago I studied VB/winform while at school) to having a basic kiosk type browser written. Everything learnt from asking questions and Google (and simple code examples).

Once this is all setup and running, in the long term I don't see any needs for major works being done other than updating webview2 sdk and maybe changing a few options there and there (since the sdk comes with new toys from time to time).

Any help would be greatly appreciated.

PS, I was going to ask about drag and dropping the tabs (and dragging then into own windows) but I think I will hold off on that, one step at a time.

[sskodje]

I realize the current demo was a bit convoluted, and fails to provide a simple example, so i updated it with a very simple example using WebView2. I also migrated it from the deprecated MVVM light library to use the recommended .net community toolkit. I hope it provides a much clearer picture of what is needed, without all the clutter. Apart from community toolkit mvvm and webview2 packages, the example is entirely contained within WebViewExampleWindow.

ead1a3d

[Danielx64]

Thank you so much for providing an updated demo and a decent webview2 example. I decided to go ahead and use your version of the base and I managed to clear out what I don't think is needed. I've edited the app.xaml file so that it would load up the WebViewExampleWindow.xaml file by default and that did what I expected.

Before I start hacking away trying to get all the other bits in (my production app does almost everything with code, with just one tag in the xaml file for webview2), when I compile the app and run it, I am finding that the webpage is not loading but as soon as I hit the new tab function, a page will load and the same will happen in the first tab.

When I use your example app without any changes, pressing that button to get the popup, this issue doesn't show up, so I guess pressing that button does something extra that I need to add in (or I removed too much).

Here's the link to the latest repo if you are interested. I'll need to do further cleaning up of the branch, sorry about the readme file etc.

[sskodje]

Ah right, i forgot the SelectedTab property, so it tries to load a "null" value on startup. Set it like this and the blank loading issue should be fixed.

[Danielx64]

Whooo hoooo, thank you - I just tested it and it works. :) Now I just need to clean up the rest that isn't needed, get some sleep (I'm from Australia :)) and then try and get the rest in.

Looking forward to getting an improved app out to the company I work for.