I am creating a small wpf program in .net5. It should have a tab system and a sidebar. The Dirkster.AvalonDock library github is suitable for my purposes. Installed version 4.60.0. I just started getting to know this library. The difficulty arose with the sidebar. LayoutAnchorablePane is responsible for its output. But the result is not what I expect.
I need to get something like this
img1
There is now
img2
View code:
<Window x:Class="TestApp.Views.MainWindowView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:TestApp.ViewModels"
xmlns:cm="http://www.caliburnproject.org"
mc:Ignorable="d"
Width="800" Height="450"
Title="MainWindow">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<DockingManager x:Name="DockManager" Grid.Column="0"
DocumentsSource="{Binding Items}"
AnchorablesSource="{Binding MenuItems}"
>
<DockingManager.LayoutItemTemplate>
<DataTemplate>
<ContentControl cm:View.Model="{Binding Content}" IsTabStop="False" />
</DataTemplate>
</DockingManager.LayoutItemTemplate>
<DockingManager.LayoutItemContainerStyle>
<Style TargetType="{x:Type LayoutItem}">
<Setter Property="Title" Value="{Binding Model.DisplayName, Mode=OneWay}"/>
<Setter Property="CloseCommand" Value="{Binding Model.CloseCommand}"/>
</Style>
</DockingManager.LayoutItemContainerStyle>
<LayoutRoot>
<LayoutPanel>
<LayoutDocumentPaneGroup>
<LayoutDocumentPane />
</LayoutDocumentPaneGroup>
<LayoutAnchorablePaneGroup>
<LayoutAnchorablePane DockMinWidth="300" />
</LayoutAnchorablePaneGroup>
</LayoutPanel>
</LayoutRoot>
</DockingManager>
</Grid>
The viewmodel code is not important, I think. Also installed in the project is caliburn.micro
Please tell me how to get the sidebar as in the first picture.
You have to install VS2013 theme package (link) then use the light version like the following:
<DockingManager.Theme>
<Vs2013LightTheme />
</DockingManager.Theme>
Related
I am trying to create a very simple WPF application to experiment this concept of the Visual Studio Image Service and Catalog.
I don't understand why I cannot seem to be able to show any of the known images (using KnownMonikers) both on the WPF designer or when the app runs.
The image is there. It just does not show anything.
Here's the WPF source code (following exactly the steps described in the MSDN link above):
<Window x:Class="ImageCatalogBrowser.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ImageCatalogBrowser"
xmlns:imaging="clr-namespace:Microsoft.VisualStudio.Imaging;assembly=Microsoft.VisualStudio.Imaging"
xmlns:theming="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Imaging"
xmlns:utilities="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Utilities"
xmlns:catalog="clr-namespace:Microsoft.VisualStudio.Imaging;assembly=Microsoft.VisualStudio.ImageCatalog"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<utilities:BrushToColorConverter x:Key="BrushToColorConverter"/>
</Window.Resources>
<Grid>
<StackPanel
Background="White"
VerticalAlignment="Center"
theming:ImageThemingUtilities.ImageBackgroundColor="{Binding Background, RelativeSource={RelativeSource Self}, Converter={StaticResource BrushToColorConverter}}">
<Border BorderThickness="1" BorderBrush="Black" Width="33" Height="33">
<imaging:CrispImage
x:Name="crisp"
Visibility="Visible"
Width="32"
Height="32"
Moniker="{x:Static catalog:KnownMonikers.Save}" />
</Border>
</StackPanel>
</Grid>
</Window>
Can anyone help please?
What's your code-behind doing to initialize the ImageLibrary? If the library cannot find the moniker you're requesting, then it won't display the image.
Make sure when initializing the ImageLibrary you give it the path to the ImageCatalog's .imagemanifest file (in the VS install dir).
I'm trying to load a template for displaying a list box.Here i have two different templates
and i have to load one template depending upon the configuration value.First give some idea
that how to load different templates for a single list box.
Here is my XAML code
<Window x:Class="DynamicTemplate.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:local="clr-namespace:DynamicTemplate"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<ResourceDictionary>
<DataTemplate x:Key="LargeTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="Large Template" FontSize="10" Foreground="Black"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="SmallTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="Small template" FontSize="10" Foreground="Blue"/>
</Grid>
</DataTemplate>
</ResourceDictionary>
</Window.Resources>
<ListBox x:Name="MyListBox" Width="200" Height="200" ItemsSource="{Binding Path=list1}" >
<ListBox.Style>
<Style TargetType="ListBox">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=size}" Value="Small">
<Setter Property="ListBox.ItemTemplate" Value="{StaticResource SmallTemplate}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=size}" Value="Large">
<Setter Property="ListBox.ItemTemplate" Value="{StaticResource LargeTemplate}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Style>
</ListBox>
</Window>
Please try to help me i need to do this now. please check the code and reply me soon.
Thanks in advance.
Instead of style triggers in xaml i have used FindResource method like this in my .cs file
Here is my code
string alertTemplateStyle = ConfigurationManager.AppSettings["AlertTemplateStyle"];
//it will return the value of my configuration file either 1 or 2 depending
// upon user requirement
DataTemplate template = null;
int size = int.Parse(alertTemplateStyle);
if (size == 1)
{
template = this.FindResource("SmallTemplate") as DataTemplate;
}
else
{
template = this.FindResource("LargeTemplate") as DataTemplate;
}
AlertsListBox.ItemTemplate = template;//AlertsListBox is my xaml listbox name
What is wrong with your current suggestion?
I guess you could use a DataTemplateSelector to achieve something similar, even though I think DataTemplateSelector usually switches the used DataTemplate based on the items themselves.
//daniel
I have 2 dictionaries merged in my WPF app (base dict merged with skin dict).
It works very fine on the MainWindow, but when I added a new WPF Window, it seems unable to access the StaticResource.
This is the code of the new Window:
<Window x:Class="Sc2ReplayMonkey.PleaseWaitWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
xmlns:local="clr-namespace:Sc2ReplayMonkey"
Title="PleaseWaitWindow" Height="300" Width="300">
<Grid Style="{StaticResource WindowBackground}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Style="{StaticResource WindowTextelement}" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">
Please wait while the replays
</TextBlock>
<TextBlock Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
are parsed and serialized
</TextBlock>
</Grid>
</Window>
I get the error "Cannot find the resource named "WindowBackground".
It is defined in the skin dict as:
<Style x:Key="WindowBackground" TargetType="{x:Type Grid}">
<Setter Property="Background" Value="Black" />
</Style>
What did I miss?
I think you need to add
Resources.MergedDictionaries.Add(resources);
in you App.cs class once f.e in Initialize() method. Then your dictionary will be accessible from any windows.
This solved the problem, I simply added a line in PleaseWaitWindow's constructor: Resources = main.Resources; main being the MainWindow
Have I missed something in the step up from .net 3.5 to .net 4 because I'm seeing seemingly buggy behaviour that seems contrary to the goal of the system.
I am trying to drum up a simple MVVM library for work using a few examples. I am consuming it within a Twitter client application for some additional learning and have hit a big stumbling block.
The scenario is this. My root ViewModel (TwitterClientViewModel) object is given an instance of a DialogViewModel object for display. The DialogViewModel is added to a collection and a bool HasDialogs is set to true. PropertyChanged events are invoked for the collection and the flag if necessary. This part works fabulously.
The view for TwitterClientViewModel is called TwitterClientTemplate and makes Visible an overlay for DialogViewTemplate (DialogViewModel's view) hosting. The hosting ContentControl's template references DialogViewTemplate with a DynamicResource extension. This displays great in the designer and at runtime.
This is where things get strange. The 'body' of DialogViewTemplate hosts dialog content with a further content control bound to DialogViewModel.Content (type object). The hope was that with use of a TemplateSelector (of which I wrote a nice declarative one, but have commented out for testing purposes) I could display both text and interactive elements. For example, requesting details from the user when authenticating a Twitter account. In this case, a PIN number.
At this point I have a two nested contentcontrols for the dialog implementation. For testing purposes, the contentcontrol in the body of DialogViewTemplate uses a staticresource extension to retrieve EnterPINDialogTemplate (view for EnterPINDialogViewModel). Both EnterPINDialogTemplate and DialogViewTemplate are in the same file (the former is defined first of course) although originally they were separate.
At runtime the staticresource extension throws a XamlParseException with the message;
'Provide value on 'System.Windows.Markup.StaticResourceHolder' threw an exception.'
and an inner exception message;
'Cannot find resource named 'EnterPINDialogTemplate'. Resource names are case sensitive'
Using a dynamicresource returns null and displays the Fullname of the EnterPINDialogViewModel type in the contentcontrol - as expected when the resource is not resolved. Breaking into my custom TemplateSelector as calling FrameWorkElement.FindResource() throws a similar exception (TryFindResource returns null).
My first thought was that the logical tree is split when the datatemplates are constructed and I remembered an issue in that area from an earlier project. I tried using the MergeDictionaries property of ResourceDictionary to make the resource dictionaries avaliable from within the DataTemplate but the designer did not like that one bit, and the error is described here:
http://connect.microsoft.com/VisualStudio/feedback/details/498844/wpf-designer-throws-invalidcastexception
Scratch that idea. I have tried merging the dictionaries at Application, Window and TwitterClientTemplate levels but have had no luck.
Below are the xaml files.
DialogTemplates.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:VM="clr-namespace:EpicTweet.ViewModel"
xmlns:ET="clr-namespace:EpicTweet"
xmlns:T="clr-namespace:EpicTweet.Tools"
xmlns:MV="clr-namespace:MVVM;assembly=MVVM"
xmlns:Loc="clr-namespace:EpicTweet.Localization"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<DataTemplate DataType="VM:EnterPINDialogViewModel" x:Key="EnterPINDialogTemplate">
<Grid d:DesignWidth="453.89" d:DesignHeight="78.92" Loc:ResXManagerProperty.ResourceManager="{x:Static ET:Language.ResourceManager}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Content="{Loc:ResxExtension ResourceName=String_PIN, FallbackValue='<PIN>'}"/>
<TextBox Grid.Column="1"/>
<TextBlock Grid.Row="1" Grid.RowSpan="2"></TextBlock>
</Grid>
</DataTemplate>
<DataTemplate x:Key="DialogViewTemplate" DataType="MV:DialogViewModel">
<Border BorderBrush="Black" BorderThickness="1">
<Grid d:DesignWidth="277.419" d:DesignHeight="74.96" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" Height="Auto" Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border d:LayoutOverrides="Width, Height" BorderThickness="0,0,0,1" BorderBrush="Black">
<Label Content="{Binding DisplayName, FallbackValue=Header}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</Border>
<ContentControl Content="{Binding Content, FallbackValue=Body}" ContentTemplate="{StaticResource EnterPINDialogTemplate}" HorizontalAlignment="Stretch" d:LayoutOverrides="Height" Grid.Row="1" Margin="5">
<!--<ContentControl.ContentTemplateSelector>
<T:TypeTemplateSelector>
<T:TemplateTypeRelationship Type="{x:Type VM:EnterPINDialogViewModel}" ResourceKey="EnterPINDialogTemplate"/>
</T:TypeTemplateSelector>
</ContentControl.ContentTemplateSelector>-->
</ContentControl>
<ItemsControl Grid.Row="2" Margin="10"
ItemsSource="{Binding Commands, Mode=OneTime, FallbackValue={x:Static VM:TwitterClientViewModel.DEFAULT_DIALOG_COMMANDS}}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button
Content="{Binding DisplayName, FallbackValue=CommandName, Mode=OneWay}"
Command="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</Border>
</DataTemplate>
TwitterClientDataTemplate.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:VM="clr-namespace:EpicTweet.ViewModel"
xmlns:ET="clr-namespace:EpicTweet"
xmlns:MV="clr-namespace:MVVM;assembly=MVVM"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="DialogTemplates.xaml"/>
</ResourceDictionary.MergedDictionaries>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<DataTemplate x:Key="TwitterClientTemplate" DataType="MV:TwitterClientViewModel">
<ScrollViewer d:DesignWidth="285.083" d:DesignHeight="119.96">
<Grid>
<StackPanel d:LayoutOverrides="Width, Height">
<StackPanel Orientation="Horizontal">
<Button Command="{Binding AddAccountCommand.Command}" Content="{Binding AddAccountCommand.DisplayName, FallbackValue=<Add Account>}"/>
</StackPanel>
<ContentControl/>
</StackPanel>
<Border BorderThickness="1" Background="#80000000" Visibility="{Binding HasDialogs, Converter={StaticResource BooleanToVisibilityConverter}, FallbackValue=Collapsed, Mode=OneWay}">
<Grid VerticalAlignment="Stretch" MinWidth="50" MaxWidth="200">
<ContentControl Content="{Binding Dialogs[0], Mode=OneWay}" ContentTemplate="{DynamicResource DialogViewTemplate}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
</Grid>
</ScrollViewer>
</DataTemplate>
Help me stackoverflow, you're my only hope!
EDIT: Did some further work on this issue. If both templates are in the same file dynamicresource and staticresource extensions both resolve the resource without issue. If they are in separate files, the resource will not resolve regardless of how I merge the dictionaries; each extension returns null.
Obviously the solution is to throw both resources into the same dictionary but as far as I'm concerned this is a hack and is not intended behaviour of the logical resource lookup system. I am not a happy bunny right now. This seems pretty undocumented...
If ever there was a pratt, it is me. After 4 hours on a Friday night trying to solve this one I have cracked it, no thanks to what I can only call flaky error reporting.
Here is the buzz.
<DataTemplate x:Key="TwitterClientTemplate" DataType="MV:TwitterClientViewModel">
should be
<DataTemplate x:Key="TwitterClientTemplate" DataType="{x:Type MV:TwitterClientViewModel}">
And bam, it works.
My big gripe remains however. Why does the incorrect syntax work in the designer but not at runtime? My guess is because runtime optimization just doesn't bother to populate a dictionary with poorly authored xaml but it would be nice to get a warning that it is wrong.
I have a (hopefully) interesting question.
First of all what I'm trying to do here:
I'm trying to create a pie-chart-like set of buttons, later this control will be used within a touch enabled application. The control draws and looks just fine, also all of the behaviours are fine so far. However, one thing that I'm having issues with is the translations I do to all the pieces of the pie.
SO what I do is: I want margin n between the pie pieces, to create this margine I move all pieces away from the middle. This means that the pie piece that's facing UP will have a negative translation. This in turn means that the Canvas will clip a part of the top (due the top being at 14, -2 for example). Another thing that I've added are pieces of text which are also making the pie pieces quite a bit longer. See the image included for reference.
image
To the left you can see the clipping issue I'm talking about to the right you can see an arbitrarily translated version of the same thing.
Some code paste:
Main window XAML:
<controls:PieMenu Radius="100" Padding="10">
<controls:PieMenu.MenuItems>
<controls:PieMenuItem Text="Employment" Brush="#FF33FF" Command="BrowseBack" />
<controls:PieMenuItem Text="General" Brush="#9933FF" Command="BrowseBack" />
<controls:PieMenuItem Text="Internships" Brush="#3333FF" Command="BrowseBack" />
<controls:PieMenuItem Text="Bla" Brush="#3399FF" Command="BrowseBack" />
<controls:PieMenuItem Text="Bla" Brush="#007AF5" Command="BrowseBack" />
</controls:PieMenu.MenuItems>
PieMenu XAML:
<UserControl x:Class="PieControlLibrary.PieMenu"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:self="clr-namespace:PieControlLibrary"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<!-- <CollectionViewSource x:Name="menuItemCollectionViewSource" Source="{Binding MenuItems, RelativeSource={RelativeSource AncestorType=self:PieMenu}}"/>-->
<Style TargetType="{x:Type ListView}" x:Key="listViewStyle">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<self:PieButton Radius="{Binding Radius, RelativeSource={RelativeSource AncestorType=self:PieMenu}}"
Degrees="{Binding Degrees, RelativeSource={RelativeSource AncestorType=self:PieMenu}}"
Brush="{Binding Brush}"
Command="{Binding Command}"
Text="{Binding Text}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<ListView x:Name="menuItemsView" ItemsSource="{Binding MenuItems, RelativeSource={RelativeSource AncestorType=self:PieMenu}}" Style="{StaticResource listViewStyle}" />
</Grid>
PieButton (this is what the pie menu items are converted to)
<UserControl x:Class="PieControlLibrary.PieButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:control="clr-namespace:PieControlLibrary"
xmlns:TextOnPath="clr-namespace:Petzold.TextOnPath"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
>
<Grid>
<Button HorizontalAlignment="Left" VerticalAlignment="Top" DataContext="{Binding RelativeSource={RelativeSource AncestorType=control:PieButton}}" Command="{Binding Command}">
<Button.Template>
<ControlTemplate>
<Canvas >
<Path Data="{Binding PathData}" Fill="{Binding Brush}" Grid.Row="0" Grid.Column="0" />
<TextOnPath:TextOnPathControl PathFigure="{Binding TextPath}" Text="{Binding Text}" FontFamily="Consolas" FontSize="12" Foreground="Black" FontStretch="Normal" />
</Canvas>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
I'm not sure if I understand your question, but when you draw your pie chart, just leave some extra space around the edges so you can move the pie pieces out from the center?
Perhaps you could use a RenderTransform when your pie pieces expand to shift or scale the image a tiny bit to keep it in bounds?