I've just started learning WPF, and followed a book to make this sample calculator application in XAML.
The XAML code is attached below.
I don't have any UI specific code in the xaml.cs file.
However, I'm seeing a difference between design time and runtime. As you can see in the attached screenshot, the upper left button of the calculator is bigger than the rest.
Even more confusingly, the designer when I edit the XAML shows the button correctly.
I've tried to determine why is that, and I'm stumped. Can anyone help?
I'm using VS2008, targeting framework 3.5, if it's any help.
Here's the XAML:
<Window x:Class="TestWpf2008.Calculator"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestWpf2008"
Title="Calculator" FontFamily="Calibri" FontSize="15"
SizeToContent="WidthAndHeight" Loaded="Window_Loaded">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary1.xaml"/>
<ResourceDictionary>
<SolidColorBrush x:Key="MyTitleColor" Color="Chocolate" />
<Style TargetType="Button">
<Setter Property="Margin" Value="6"/>
</Style>
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid Background="{StaticResource PrettyBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" FontSize="24"
Name="Header"
VerticalAlignment="Center" HorizontalAlignment="Center">Calculator</TextBlock>
<TextBox Grid.ColumnSpan="4" Grid.Column="0" Grid.Row="1" Name="Display"
HorizontalContentAlignment="Left" Margin="5" />
<Button Grid.Row="2" Grid.Column="0" Click="Button_Click">7</Button>
<Button Grid.Row="2" Grid.Column="1" Click="Button_Click">8</Button>
<Button Grid.Row="2" Grid.Column="2" Click="Button_Click">9</Button>
<Button Grid.Row="3" Grid.Column="0" Click="Button_Click">4</Button>
<Button Grid.Row="3" Grid.Column="1" Click="Button_Click">5</Button>
<Button Grid.Column="2" Grid.Row="3" Click="Button_Click">6</Button>
<Button Grid.Row="4" Grid.Column="0" Click="Button_Click">1</Button>
<Button Grid.Row="4" Grid.Column="1" Click="Button_Click">2</Button>
<Button Grid.Row="4" Grid.Column="2" Click="Button_Click">3</Button>
<Button Grid.Row="5" Grid.Column="0" Click="Button_Click">0</Button>
<Button Grid.Row="5" Grid.Column="3" Tag="{x:Static local:Operation.PLUS}"
Click="Op_Click">+</Button>
<Button Grid.Row="4" Grid.Column="3" Tag="{x:Static local:Operation.MINUS}"
Click="Op_Click">-</Button>
<Button Grid.Row="3" Grid.Column="3" Tag="{x:Static local:Operation.TIMES}"
Click="Op_Click">*</Button>
<Button Grid.Row="2" Grid.Column="3" Tag="{x:Static local:Operation.DIVIDE}"
Click="Op_Click">/</Button>
<Button Grid.Row="5" Grid.Column="1" >.</Button>
<Button Grid.Row="5" Grid.Column="2" Tag="{x:Static local:Operation.EQUALS}"
Click="Op_Click">=</Button>
</Grid> </Window>
From MSDN
It is legal to define resources within a ResourceDictionary that is specified as a merged dictionary, either as an alternative to specifying Source, or in addition to whatever resources are included from the specified source. However, this is not a common scenario; the main scenario for merged dictionaries is to merge resources from external file locations. If you want to specify resources within the markup for a page, you should typically define these in the main ResourceDictionary and not in the merged dictionaries.
So you just have to move the style out from the merged resourcedictionary
but i suggest that you should
move
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary1.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
to Application.Resources in App.xaml
keep
<Style TargetType="Button">
<Setter Property="Margin" Value="6"/>
</Style>
in Window.Resources
because thats what you usally would do with merged resourcedictionarys because of the easy reuse between projects of your 'Dictionary1.xaml'
Related
I have a an Expander inside a Stackpanel, inside a ScrollViewer.
Now when I move my mouse over the expanded expander, the scrolling of the scrollviewer doesnt work anymore.
Can someone help me understand why?
<ScrollViewer VerticalScrollBarVisibility="Auto" Name="Scroller">
<StackPanel Name="Panel1">
<Expander Header="{Binding Source={x:Static properties:Strings.GeneralSettings}}" IsExpanded="True">
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBox Grid.Column="0" Grid.Row="0" Text="{Binding ProjectDataService.CurrentProject.ProjectName,Mode=TwoWay}" material:TextFieldAssist.Hint="Projektname" Margin="10" />
<TextBox Grid.Column="1" Grid.Row="0" Text="{Binding ProjectDataService.CurrentProject.ProjectLead,Mode=TwoWay}" material:TextFieldAssist.Hint="Projektleitung" Margin="10" />
<TextBox Grid.Column="0" Grid.Row="1" Text="{Binding ProjectDataService.CurrentProject.City,Mode=TwoWay}" material:TextFieldAssist.Hint="Ort" Margin="10" />
<TextBox Grid.Column="1" Grid.Row="1" Text="{Binding ProjectDataService.CurrentProject.ZipCode,Mode=TwoWay}" material:TextFieldAssist.Hint="Postleitzahl" Margin="10" />
<TextBox Grid.Column="0" Grid.Row="2" Text="{Binding ProjectDataService.CurrentProject.Street,Mode=TwoWay}" material:TextFieldAssist.Hint="Strasse" Margin="10" />
<TextBox Grid.Column="1" Grid.Row="2" Text="{Binding ProjectDataService.CurrentProject.HouseNumber,Mode=TwoWay}" material:TextFieldAssist.Hint="Hausnummer" Margin="10" />
<TextBox Grid.Column="0" Grid.Row="3" Text="{Binding ProjectDataService.CurrentProject.ContactName,Mode=TwoWay}" material:TextFieldAssist.Hint="Ansprechpartner vor Ort" Margin="10" />
<TextBox Grid.Column="1" Grid.Row="3" Text="{Binding ProjectDataService.CurrentProject.ContactEmail,Mode=TwoWay}" material:TextFieldAssist.Hint="Kontaktemail" Margin="10" />
<ComboBox Grid.Column="0" Grid.Row="4" Margin="10" SelectedItem="{Binding ProjectDataService.CurrentProject.ProjectStatus,Mode=TwoWay}" material:TextFieldAssist.Hint="Projektstand">
<ComboBoxItem Content="Abgenommen" />
<ComboBoxItem Content="Eingebaut" />
</ComboBox>
</Grid>
</StackPanel>
</Expander>
</StackPanel>
</ScrollViewer>
I found out, that it is the MaterialDesign Framework, which breaks the scrolling. To enable the framework I need to put
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Indigo.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
into the application.ressources.
the second line breaks the scrolling
I had the same issue. It is a bug in the material design nuget: https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/issues/1395
it is fixed in the current preview for materialdesignthemes 3.0. Check "include prerelease" in nuget manager to be able to select the preview versions for this nuget package.
I have an issue with a text. In some custom usercontrols it is flickering every more/less second (probably when rendering) here is a gif:
I'm using these render and text options for now which are applied on Window:
RenderOptions.ClearTypeHint="Enabled"
TextOptions.TextFormattingMode="Display"
RenderOptions.BitmapScalingMode="HighQuality"
I was using these before:
RenderOptions.ClearTypeHint="Enabled"
RenderOptions.BitmapScalingMode="Linear"
TextOptions.TextRenderingMode="Grayscale"
TextOptions.TextFormattingMode="Display"
and it was ok but the text was too sharp.
XAML of this specific component:
<UserControl x:Class="FunctionButton" x:Name="PART_Base"
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:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" xmlns:ViewModels="clr-namespace:SkyPCTool"
xmlns:materialDesign="clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf"
mc:Ignorable="d"
TextElement.FontWeight="Medium"
TextElement.FontSize="14"
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
MinHeight="52" d:DesignWidth="300" Margin="0">
<UserControl.DataContext>
<ViewModels:FunctionButtonViewModel/>
</UserControl.DataContext>
<UserControl.Resources>
<ViewModels:TextToVisibilityConverter x:Key="textConverter" />
</UserControl.Resources>
<Border CornerRadius="2" Background="{StaticResource MaterialDesignPaper}">
<Grid Margin="12,6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Button x:Name="PART_Button" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="12,6" Content="{Binding ButtonCaption}" />
<Grid Grid.Column="1" Margin="6,0">
<Image Source="{Binding Icon}" ToolTip="{Binding IconTag}" />
</Grid>
<Grid Grid.Column="2" SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Title}" RenderOptions.ClearTypeHint="Enabled" VerticalAlignment="Center" TextTrimming="CharacterEllipsis" FontSize="14" />
<TextBlock Grid.Row="1" Text="{Binding Description}" RenderOptions.ClearTypeHint="Enabled" Margin="12,0,0,0" Visibility="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource textConverter}}" FontWeight="Normal" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="12.667" />
</Grid>
</Grid>
</Border>
I did it. I downloaded the Roboto font from Google website, then I set these options on Window:
RenderOptions.ClearTypeHint="Enabled"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextHintingMode="Animated"
TextOptions.TextRenderingMode="ClearType"
I have a stackpanel inside a controltemplate inside a itemscontrol inside a stackpanel inside a grid inside a usercontrol (se the xaml below). In the inner stackpanel there is a label (Name="NoComponentChosen") and another stackpanel (Name="ComponentChosen"). The label's visibility is initially collapsed.
The controltemplate has a datatrigger with a binding. When the binding reference has a specific value the label (NoComponentChosen) becomes visible and the stackpanel collapses.
I would like to skip the label/stackpanel when I am tabbing trough the user interface. I would also like to still be able tab through the rest of the things in my ChangeRequestView.xaml (listbox and buttons).
Right now - when I tab - the label/stackpanel eventually becomes chosen and is surrounded by a dotted rectangle. That is what I would like to avoid.
This is my ChangeRequestView.xaml:
<UserControl x:Class="MyProgram.View.ChangeRequestView"
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:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:ListBoxBehavior="clr-namespace:MyProgram.Utility"
mc:Ignorable="d"
d:DesignHeight="500" d:DesignWidth="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="35"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="20*"/>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<!--The title of the view-->
<Label Grid.Row="0" Content="Change Requests" FontWeight="Bold" Margin="5,5,5,5" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<!--The component chosen-->
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="5,0,0,0" IsHitTestVisible="False" Focusable="False">
<ItemsControl>
<ItemsControl.Template>
<ControlTemplate>
<StackPanel>
<StackPanel Name="ComponentChosen" Orientation="Horizontal">
<Label Content="Reference des.: " />
<Label Name="referenceDesignation" Content="{Binding Path=ReferenceDesignation, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>
<Label Name="NoComponentChosen" Content="Choose a component" Visibility="Collapsed"/>
</StackPanel>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ReferenceDesignation}" Value="">
<Setter TargetName="ComponentChosen" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="NoComponentChosen" Property="Visibility" Value="Visible"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
</StackPanel>
<ListBox Grid.Row="2" ... />
<Button Grid.Row="3" ... />
<Button Grid.Row="4" ... />
</Grid>
</UserControl>
The whole UserControl/ChangeRequestView.xaml is part of my MainWindow - I don't know if that has anything to say. I tab through all of the different views in my MainWindow, and when I get to the ChangeRequestView I would like to skip the label/stackpanel according to which of them isn't collapsed.
This is my MainWindow.xaml:
<Window x:Class="MyProgram.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:view="clr-namespace:MyProgram.View"
xmlns:vm="clr-namespace:MyProgram.ViewModel"
...>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="309*"/>
<RowDefinition Height="187*"/>
<RowDefinition Height="120*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="209*"/>
<ColumnDefinition Width="558*"/>
<ColumnDefinition Width="250*"/>
</Grid.ColumnDefinitions>
<Menu IsMainMenu="True" Name="Menu1" VerticalAlignment="Top" Grid.Row="0" Grid.ColumnSpan="3">
<MenuItem Header="_File">
<MenuItem Header="_Save changed change requests for current reference designation"
InputGestureText="Ctrl+S" Command="{Binding Path=HotKeysSaveChangeRequestUpdateCmd}"/>
<MenuItem Header="_Upload change requests for current project"
InputGestureText="Ctrl+U" Command="{Binding Path=HotKeysUploadCmd}"/>
<MenuItem Header="_Exit" ToolTip="Exit this program"
InputGestureText="CTRL+X" Command="{Binding Path=ShutDownCmd}"/>
</MenuItem>
</Menu>
<!--Search Region-->
<Border Grid.Row="2" Grid.Column="0" Grid.RowSpan="2" Margin="3,1,1,3" BorderThickness="2,2,2,2" CornerRadius="4,4,4,4" BorderBrush="LightGray">
<view:SearchView x:Name="SearchView"/>
</Border>
<!-- Project Region -->
<Border Grid.Row="1" Grid.Column="0" Margin="3,3,1,1" BorderThickness="2,2,2,2" CornerRadius="4,4,4,4" BorderBrush="LightGray">
<view:ProjectView x:Name="ProjectView" />
</Border>
<!-- Components Region -->
<Border Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Margin="1,3,1,1" BorderThickness="2,2,2,2" CornerRadius="4,4,4,4" BorderBrush="LightGray">
<view:ComponentView x:Name="ComponentView" />
</Border>
<!-- Change Request Region -->
<Border Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" Margin="1,3,3,1" BorderThickness="2,2,2,2" CornerRadius="4,4,4,4" BorderBrush="LightGray">
<view:ChangeRequestView x:Name="ChangeRequestView" />
</Border>
<!-- Log Region -->
<Border Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" Margin="1,1,3,3" BorderThickness="2,2,2,2" CornerRadius="4,4,4,4" BorderBrush="LightGray">
<view:LogView x:Name="LogView" />
</Border>
</Grid>
<Window.InputBindings>
<KeyBinding Gesture="CTRL+U" Command="{Binding Path=HotKeysUploadCmd}"/>
<KeyBinding Gesture="CTRL+S" Command="{Binding Path=HotKeysSaveChangeRequestUpdateCmd}"/>
<KeyBinding Gesture="CTRL+X" Command="{Binding Path=ShutDownCmd}"/>
</Window.InputBindings>
</Window> </br>
I apologize for the long xaml-files, but I'm thinking the more information I provide to you the easier it will be for you to help me solve this tabbing issue.
Do you have any ideas of how to skip the label "NoComponentChosen"/the stackpanel "ComponentChosen" when I tab through the user interface?
Try KeyboardNavigation.TabNavigation Attached Property with KeyboardNavigationMode.None on the container with the elements you want to skip.
KeyboardNavigation.TabNavigation="None"
I have a main abstract code-only class BaseImpostorButton, inheriting UserControl. I have a child class ClickableImageButton with xaml and code-behind.
I'm using the following style with ControlTemplate :
<Style TargetType="{x:Type local:ClickableImageButton}">
<Setter Property="ToolTipService.InitialShowDelay" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ClickableImageButton}">
<StackPanel Margin="{TemplateBinding Margin}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<ContentPresenter
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When using in a ListView as raw ListViewItem, my ClickableImageButton shows correctly.
BUT: when using it in a listview with ItemTemplate DataTemplate, the ClickableImageButton is no longer shown... as if the Content was empty when inside a DataTemplate.
The solution i found was to write a DependencyProperty ButtonContent on BaseImpostorButton and set it explicitly in xaml.
But can someone explain this issue ?
EDIT: Here are the 2 different xaml
The one that is correctly showing the underlying image (ClickableImage is an Image)
<ListView Grid.Row="1" Name="ListViewSections" ItemsSource="{Binding Path=Sections}" Background="{x:Null}" SizeChanged="ListViewSections_SizeChanged">
<ListViewItem>
<Grid MaxWidth="600">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="150"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="{Binding Path=Titre}" Margin="5,0,5,0" FontSize="18" FontWeight="Bold" Foreground="White" TextWrapping="Wrap" FontFamily="Arial" HorizontalAlignment="Left" />
<local:ClickableImageButton Grid.Row="1" Tag="{Binding Path=Id}" Grid.Column="0" ImpostorClick="Image_Click" Margin="10">
<local:ClickableImageButton.Content>
<local:ClickableImage Source="Content/tada.png" />
</local:ClickableImageButton.Content>
</local:ClickableImageButton>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Texte}" Margin="10,0,10,0" FontSize="16" Foreground="White" TextWrapping="Wrap" FontFamily="Arial" VerticalAlignment="Center" HorizontalAlignment="Left" />
</Grid>
</ListViewItem>
</ListView>
And the one that's not working
<ListView Grid.Row="1" Name="ListViewSections" ItemsSource="{Binding Path=Sections}" Background="{x:Null}" SizeChanged="ListViewSections_SizeChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid MaxWidth="600">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="150"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="{Binding Path=Titre}" Margin="5,0,5,0" FontSize="18" FontWeight="Bold" Foreground="White" TextWrapping="Wrap" FontFamily="Arial" HorizontalAlignment="Left" />
<local:ClickableImageButton Grid.Row="1" Tag="{Binding Path=Id}" Grid.Column="0" ImpostorClick="Image_Click" Margin="10">
<local:ClickableImageButton.Content>
<local:ClickableImage Source="Content/tada.png" />
</local:ClickableImageButton.Content>
</local:ClickableImageButton>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Texte}" Margin="10,0,10,0" FontSize="16" Foreground="White" TextWrapping="Wrap" FontFamily="Arial" VerticalAlignment="Center" HorizontalAlignment="Left" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
So finally i get it to work. That wasn't due to the fact that i was deriving from UserControl.
So i kept deriving BaseImpostorButton from UserControl, i emptyed the ContentPresenter in the ControlTemplate (<ContentPresenter />).
I didn't have to set the DefaultStyleKey.
I just had to remove any content from the child class xaml file. Indeed, when i created my child UserControl, i didn't removed the default content added, that is <Grid />. Removing this just solved all my problems.
Looks like the default Content is not overriden when we try to set it from a templated context, but only when set from a non templated context.
ie Former code:
<sk:BaseImpostorButton x:Class="Compteur_3D.ClickableImageButton"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid/>
</sk:BaseImpostorButton>
revised code:
<sk:BaseImpostorButton x:Class="Compteur_3D.ClickableImageButton"
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" mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
</sk:BaseImpostorButton>
Edit: At runtime, my ClickableImageButton element has the right content (ie ClickableImage) when the <Grid /> is removed. BUT when <Grid /> is not removed, my ClickableImageButton has the empty Grid as content... As if this <Grid /> was not overriden when setting the content in:
<local:ClickableImageButton ImpostorClick="Image_Click" Margin="10">
<local:ClickableImageButton.Content>
<local:ClickableImage Source="{Binding Path=Image.Source}" />
</local:ClickableImageButton.Content>
</local:ClickableImageButton>
Edit: Target Framework 4 Client Profile
I am working on a WPF application that uses the Telerik RAD controls for WPF. The application will be used on a PC with a touch screen, so I need to make things like pickers on the DateTimePicker control larger so they can be easily pressed by people with sausage fingers like my own.
I originally used Expression Blend to edit a copy of the control's template. That created a ControlTemplate in the UserControl's XAML file that I was designing. I have another UserControl I'm working on now that will also use the DateTimePicker, so I want to reuse the ControlTemplate.
What I did was I moved the modified template into a new named Style in the project's (a WPF Control Library) Generic.XAML. Here's a short snippet of the Generic.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CarSystem.CustomControls"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:Telerik_Windows_Controls_Chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls">
<Style x:Key="RadDateTimePickerControlTemplate1" TargetType="{x:Type telerik:RadDateTimePicker}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadDateTimePicker}">
. . .
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Here's a snippet of the XAML where I reference the style:
<UserControl x:Class="CarSystem.CustomControls.ReportCriteria"
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:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:cs="clr-namespace:CarSystem.CustomControls"
mc:Ignorable="d"
Height="648"
Width="1117">
<Grid Background="{DynamicResource ContentBackground}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<GroupBox BorderBrush="Black" FontSize="20" FontWeight="Bold" Grid.Row="0" Header="Report Criteria: " Margin="5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="320" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="450" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="110" />
</Grid.ColumnDefinitions>
<GroupBox BorderBrush="Black" FontSize="20" FontWeight="Bold" Grid.Column="0" Header="Date Range:" Margin="5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock FontSize="18"
FontWeight="Bold"
Grid.Column="0"
Grid.Row="0"
HorizontalAlignment="Right"
Text="Start Date: " />
<telerik:RadDateTimePicker FontSize="18"
FontWeight="Bold"
Grid.Column="1"
Grid.Row="0"
Name="StartDatePicker"
Style="{DynamicResource RadDateTimePickerControlTemplate1}" />
<TextBlock FontSize="18"
FontWeight="Bold"
Grid.Column="0"
Grid.Row="1"
HorizontalAlignment="Right"
Text="End Date: " />
<telerik:RadDateTimePicker FontSize="18"
FontWeight="Bold"
Grid.Column="1"
Grid.Row="1"
Name="EndDatePicker"
Style="{DynamicResource RadDateTimePickerControlTemplate1}" />
</Grid>
</GroupBox>
. . .
</GroupBox>
</Grid>
</UserControl>
When I work in Expression Blend, everything looks fine. I see the change in the width of the drop down button for the control. Back in Visual Studio, everything compiles fine, but the change does not show up -- I see the default style for the control only, and the references to the style have a blue squiggly line under them. When you hover the mouse over the squiggly line, the following message is displayed:
The resource "RadDateTimePickerControlTemplate1" cannot be resolved.
The same thing happens if I change "DynamicResource" to "StaticResource" in the XAML. Also, I have made no changes to the Assembly.Info file for the project.
How do I fix this?
Thanks
Tony
As far as I remember you can't have named resources you want to reference in generic.xaml - that you have to put in app.xaml
You have to give the type in key for styles or ComponentResourceKey in key for controltemplates
and in the class static constructor override metadata like:
public class FlatStylebutton : Button
{
static FlatStylebutton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(FlatStylebutton), new FrameworkPropertyMetadata(typeof(FlatStylebutton)));
}
}
So a solution to your problem could be moving the style to app.xaml
Alternatively you can put it in a separate ResourceDictionary xaml file and import it in ResourceDictionary.MergedDictionaries