The Problem
As visible in the following picture, when I have the height of the ScrollViewer content set to 1056px (100%) the text and lines are sharp.
However, when I set the height of the content to 6336px (600%) the text and lines are really blurry.
I am setting the CacheMode property of the content to a BitmapCache with default settings. I'm not sure if this is applicable, but the height is controlled by a Binding.
The Question
Is there a way to somehow refresh the CacheMode? I understood that changes to child layout properties should trigger an automatic refresh, but for some reason this is not working in my case. Or is the problem maybe just the graphics card?
What I've Tried
I set the CacheMode to null and then to a new BitmapCache.
I set the RenderAtScale property of the BitmapCache.
I ran calls to InvalidateProperty(CacheModeProperty) and UpdateLayout.
The Code
<Friction:FrictionScrollViewerControl x:Class="App.Controls.Panes.Calendar.Day.HourlyClockChartDay"
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:controls="clr-namespace:App.Controls.WeekView"
xmlns:Friction="clr-namespace:App.Controls.Friction" mc:Ignorable="d" d:DesignHeight="400"
d:DesignWidth="300" Loaded="ClockChart_Loaded" Focusable="False" VerticalScrollBarVisibility="Visible"
PreviewMouseWheel="scrollViewer_PreviewMouseWheel" VerticalSnapToValue="22">
<Grid x:Name="grid" Height="1056">
<Grid.CacheMode>
<BitmapCache />
</Grid.CacheMode>
<Grid x:Name="clockGrid" Height="{Binding Height, ElementName=grid, Mode=OneWay}" IsHitTestVisible="False">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="clockGridCol0" Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<controls:ClockGrid x:Name="clockGridBg" Grid.Column="1" Grid.RowSpan="96" />
</Grid>
<Grid x:Name="radioGrid" Height="{Binding Height, ElementName=grid, Mode=OneWay}" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Width, ElementName=clockGridCol0, Mode=OneWay}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="RadioButton">
<Setter Property="GroupName" Value="_dayGridRadios" />
<Setter Property="Margin" Value="0,0,0,1" />
<Setter Property="Grid.Column" Value="1" />
<Setter Property="ClickMode" Value="Press" />
<EventSetter Event="Checked" Handler="RadioButton_Checked" />
<EventSetter Event="PreviewMouseLeftButtonDown" Handler="RadioButton_PreviewMouseLeftButtonDown" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Rectangle x:Name="rect" Fill="Transparent" />
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Fill" TargetName="rect" Value="{DynamicResource CheckedDate}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
</Grid>
<Grid x:Name="itemsGrid" Height="{Binding Height, ElementName=grid, Mode=OneWay}" Margin="0,0,11,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Width, ElementName=clockGridCol0, Mode=OneWay}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
<Border x:Name="currentTime" Background="{DynamicResource TimeSliderBackground}"
BorderBrush="{DynamicResource TimeSliderBorder}" BorderThickness="0,1" Height="3"
VerticalAlignment="Top" Visibility="Collapsed" IsHitTestVisible="False" />
<Border BorderBrush="#FFE1E1E1" BorderThickness="0,0,1,0" IsHitTestVisible="False" />
</Grid>
</Friction:FrictionScrollViewerControl>
And the C# which sets the height:
grid.Height = (int)((int)(1056 * percent) / 528) * 528;
Related
i have defined a controltemplate that is used to windows ,then windows have the same view as basically.
after that ,i should add different controls in different windows. and i have no idea how to add the elements' host in controltemplate to hold different parts of controls which likes the picture bellow.
and one more thing, how to access the controls and how to set the buttons' actions in controltemplate of different window? it should be use a windowBase class to do that ?
first .the screen picture
and the control template file
<ImageSource x:Key="BtnCloseNormal">../images/others/popup_btn_reduction_normal.png</ImageSource>
<ImageSource x:Key="BtnCloseMouseOver">../images/others/popup_btn_reduction_mouseover.png</ImageSource>
<ImageSource x:Key="BtnClosePressed">../images/others/popup_btn_reduction_selected.png</ImageSource>
<Style x:Key="StatedButtonStyle" TargetType="{x:Type c:StatedButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type c:StatedButton}" >
<Grid>
<Border>
<Image x:Name ="btnImg" Source="{Binding NormalBackground ,RelativeSource={RelativeSource TemplatedParent}}" Stretch="Fill"/>
</Border>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="btnImg" Property="Source" Value="{Binding MouseOverBackground ,RelativeSource={RelativeSource TemplatedParent}}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="btnImg" Property="Source" Value="{Binding PressedBackground ,RelativeSource={RelativeSource TemplatedParent}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="WindowBaseStyle" TargetType="{x:Type Window}">
<Setter Property="Background" Value="{x:Null}"></Setter>
<Setter Property="AllowsTransparency" Value="True"></Setter>
<Setter Property="WindowStyle" Value="None"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid Background="{x:Null}">
<Border CornerRadius="10" Background="White" Margin="20">
<Border.Effect>
<DropShadowEffect BlurRadius="10" Color="Black" Direction="270" ShadowDepth="5" RenderingBias="Quality" Opacity="0.6"></DropShadowEffect>
</Border.Effect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="10"/>
<RowDefinition/>
<RowDefinition Height="40"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<Label x:Name="lblTitle" Grid.Column="0" Margin="20,6,0,0" FontSize="18" FontWeight="Bold"
Content="{TemplateBinding Title}">
</Label>
<c:StatedButton Grid.Column="2" Width="30" Height="30" Style="{StaticResource StatedButtonStyle}"
NormalBackground="{StaticResource BtnCloseNormal}"
MouseOverBackground="{DynamicResource BtnCloseMouseOver}"
PressedBackground="{StaticResource BtnClosePressed}"/>
<c:StatedButton Grid.Column="3" Width="30" Height="30" Style="{StaticResource StatedButtonStyle}"
NormalBackground="{StaticResource BtnCloseNormal}"
MouseOverBackground="{DynamicResource BtnCloseMouseOver}"
PressedBackground="{StaticResource BtnClosePressed}"/>
<c:StatedButton Grid.Column="4" Width="30" Height="30" Style="{StaticResource StatedButtonStyle}"
NormalBackground="{StaticResource BtnCloseNormal}"
MouseOverBackground="{DynamicResource BtnCloseMouseOver}"
PressedBackground="{StaticResource BtnClosePressed}"/>
</Grid>
<Separator Background="LightGray" Grid.Row="1" Height="2"></Separator>
<Grid Grid.Row="2">
<!--some controls will be insert here-->
</Grid>
<Grid Grid.Row="3" Background="Red" >
<!--some controls will be insert here-->
<ContentControl Content="{Binding }"></ContentControl>
</Grid>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and the window.xaml
<Window x:Class="WpfApp1.Window1"
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:WpfApp1"
xmlns:uctrls="clr-namespace:WpfApp1.Uctrls"
mc:Ignorable="d"
Style="{StaticResource WindowBaseStyle}"
Title="Window1 -- title" Height="300" Width="500">
<Grid>
<Label x:Name="lblTitle" Content="title"></Label>
<Button x:Name="BtnTest" Content="Get TextBox1" Click="BtnTestClick"></Button>
<uctrls:UserControlBase>
<Grid>
<Button Content="what "></Button>
</Grid>
</uctrls:UserControlBase>
</Grid>
i have done it myself.
just use code bellow to host new controls
<AdornerDecorator>
<contentpresenter/>
</AdornerDecorator>
and create a windowBase as parent class of new windows.
What I'm trying to do is a combobox that have the favorite values on top, with a different background color and button. Right now I have:
<UserControl x:Class="ComboBoxWithButton"
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"
Name="root"
d:DesignWidth="300" Height="25">
<ComboBox
x:Name="ComboBoxBtn"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="0,0,0,-1"
Width="300"
ItemsSource="{Binding Source, RelativeSource={RelativeSource AncestorType=UserControl}}"
SelectedItem="{Binding Path=Selected, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=UserControl}}">
<ComboBox.Resources>
<Style TargetType="ComboBoxItem">
????
</Style>
</ComboBox.Resources>
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Background" Value="#FFE6E6FA"/>
</Style>
</Grid.Style>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Content="{Binding}" Width="250" />
<Button Grid.Column="1" Command="{Binding CommandButton, ElementName=root}"
CommandParameter="{Binding}">+</Button>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</UserControl>
Right now I have an Add button so I can add my items as favorites. But what I want now is, based on the item I represent it as favorite or not.
Case is a favorite have a different background color an a [-] button (to remove). Case is not the background is white as usual and have a [+].
See if a ContentControl helps you here in place of where you are using a Button.
<ComboBox.ItemTemplate>
<DataTemplate>
<ContentControl>
<Style TargetType="ContentControl">
<Style.Triggers>
<DataTrigger Binding="{Binding ...}" Value="True">
<Setter Property="Content">
<Setter.Value>
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Background" Value="#FFE6E6FA"/>
</Style>
</Grid.Style>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Content="{Binding}" Width="250" />
<Button Grid.Column="1" Command="{Binding CommandButton, ElementName=root}"
CommandParameter="{Binding}">+</Button>
</Grid>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding ...}" Value="False">
<Setter Property="Content">
<Setter.Value>
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Background" Value="Yellow"/>
</Style>
</Grid.Style>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Content="{Binding}" Width="250" />
<Button Grid.Column="1" Command="{Binding CommandButton, ElementName=root}"
CommandParameter="{Binding}">-</Button>
</Grid>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl>
</DataTemplate>
</ComboBox.ItemTemplate>
I want to create a notification window using Mahapps.Metro. I defined a new Style for MetroWindow but when Show() is executed, application throws a null exception. If i remove the template override, i have no problem... Any ideas?
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ctrl="clr-namespace:MyApp.Controls"
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls">
<Style x:Key="ErrorPopup" TargetType="{x:Type Controls:MetroWindow}" BasedOn="{StaticResource {x:Type Controls:MetroWindow}}">
<Setter Property="BorderBrush" Value="{StaticResource ErrorPopupBorderBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Width" Value="300"/>
<Setter Property="ResizeMode" Value="NoResize"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Controls:MetroWindow}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Grid.RowSpan="3">
<Rectangle.Fill>
<SolidColorBrush Color="Red"/>
</Rectangle.Fill>
</Rectangle>
<Button Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right" Content="X" Padding="0,0,0,0"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Error Title" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<ContentPresenter Grid.Row="2" Grid.Column="1" Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
<Controls:MetroWindow x:Class="MyApp.Controls.NotificationPopup"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
Style="{StaticResource ErrorPopup}" ButtonBase.Click="Button_Clicked" Title="Notification Title">
<Controls:MetroWindow.Content>
<TextBlock x:Name="_textContainer" Style="{StaticResource NotificationText}" Text="This is the text to display" TextAlignment="Left" TextWrapping="Wrap"/>
</Controls:MetroWindow.Content>
</Controls:MetroWindow>
I have a Image buttton kind of usercontrol, which has two textblocks and an image inside button, but button is firing click only when I click on textblock or image part. just to do quick debug I have set button's cursor to Hand, strangely its showing Hand cursor only when mouse is over texblocks/Image but not on any part of the button. Here is my code
Name="Tiles" Background="Green"
d:DesignHeight="300" d:DesignWidth="300" Margin="10,10,10,10">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="booleanVisibleConverter" />
<!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
<Style x:Key="ImgBtnStyle" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="ImgBtnStyle" TargetType="{x:Type Button}">
<Border Name="border"
BorderThickness="1"
Padding="0"
BorderBrush="DarkGray"
CornerRadius="1"
Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Button Cursor="Hand" Style="{StaticResource ImgBtnStyle}" Command="{Binding TestClick, ElementName=Tiles}" CommandParameter="{Binding ElementName=Tiles, Path=TestName}" >
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding ElementName=Tiles, Path=ResultValue}" Style="{StaticResource txtblck}" Grid.Column="1" Grid.Row="1"/>
<TextBlock Text="{Binding ElementName=Tiles, Path=TestName}" Style="{StaticResource txtblck}" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" VerticalAlignment="Bottom" TextAlignment="Left" Padding="5,0,0,5"/>
<Image Source="/resources/Icons/tickBlack.png" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Visibility="{Binding Path= TestDone, ElementName=Tiles, Converter={StaticResource booleanVisibleConverter}}"/>
</Grid>
</Button>
Set Grid's Background to Transparent like below :
<Button Cursor="Hand" Style="{StaticResource ImgBtnStyle}" Command="{Binding TestClick, ElementName=Tiles}" CommandParameter="{Binding ElementName=Tiles, Path=TestName}" >
<Grid Background="Transparent">
...
</Button>
I made above changes and it worked fine for me.
How do I programmatically set border XAML objects?
I can set it in the XAML:
<Border Grid.Column="2" Grid.Row="1">
<TextBlock Text="Typical Code" />
</Border>
Here I have it with a name to set it:
<Border x:Name="Column8Text" Grid.Column="3" Grid.Row="1">
</Border>
This has no effect:
Column8Text.Name = "test";
This is the entire grid im trying to dynamiclly manipulate:
<StackPanel x:Name="GridViewView" >
<Grid x:Name="StaticGridView" Background="WhiteSmoke">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Column5" />
<ColumnDefinition x:Name="Column6" />
<ColumnDefinition x:Name="Column7" />
<ColumnDefinition x:Name="Column8" />
<ColumnDefinition x:Name="Column9" />
<ColumnDefinition x:Name="Column10" />
<ColumnDefinition x:Name="Column11" />
<ColumnDefinition x:Name="Column12" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="Background" Value="White" />
<Setter Property="Padding" Value="5" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="TextBlock.FontSize" Value="16" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="TextBlock.FontWeight" Value="Bold" />
</Style>
</Grid.Resources>
<Border Grid.Column="0" Grid.Row="1">
<TextBlock Text="Item" />
</Border>
<Border Grid.Column="1" Grid.Row="1">
<TextBlock Text="Drawing" />
</Border>
<Border Grid.Column="2" Grid.Row="1">
<TextBlock Text="Typical Code" />
</Border>
<Border x:Name="Column8Text" Grid.Column="3" Grid.Row="1">
</Border>
<Border x:Name="Column9Text" Grid.Column="4" Grid.Row="1">
</Border>
<Border x:Name="Column10Text" Grid.Column="5" Grid.Row="1">
</Border>
<Border x:Name="Column11Text" Grid.Column="6" Grid.Row="1">
</Border>
<Border x:Name="Column12Text" Grid.Column="7" Grid.Row="1">
</Border>
</Grid>
</StackPanel>
This has no effect: Column8Text.Name = "test";
To set any child object's values one cannot simply name the parent and have access to the children.
Each individual child control has to be named to be accessed in code behind.
Otherwise to change the child objects via a parent, one should create a custom control with specific dependency properties tied to the children underneath to facilitate the passage of data to the children.
To complete your example
<Border Grid.Column="2" Grid.Row="1">
<TextBlock Name="tbBorderChild" Text="Typical Code" />
</Border>
Then access it in codebehind as such:
tbBorderChild.Text = "Changed";