How to show the scrollbar in expander when content overflows the window - wpf

I'm using two expander with TextBox one after another. During writing text the TextBox dynamically changes height. When size of TextBox is higher then parent window the scrollbar isn't shown. Here is example:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="150" Width="150">
<Grid Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*" Name="GridRow1"></RowDefinition>
<RowDefinition Height="*" Name="GridRow2"></RowDefinition>
</Grid.RowDefinitions>
<Expander Grid.Row="0">
<TextBox TextWrapping="Wrap" VerticalScrollBarVisibility="Auto"/>
</Expander>
<Expander Grid.Row="1">
<TextBox TextWrapping="Wrap" VerticalScrollBarVisibility="Auto"/>
</Expander>
</Grid>
</Window>
I need to set max height of expander to half size of parent window (window is resizable). The scrollbar should be displayed if the text is longer than half size of the window. Other, when both expander are closed they should be close to each other on the top.
Scrollbar works well when in row definition is asterisk (*) but closed expander aren't not together at the top.

Apply your requirement in a Style DataTrigger for RowDefinition
<Grid Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Name="GridRow1">
<RowDefinition.Style>
<Style TargetType="{x:Type RowDefinition}">
<Setter Property="Height"
Value="*" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=expanderOne,
Path=IsExpanded}"
Value="False">
<Setter Property="Height"
Value="Auto" />
</DataTrigger>
</Style.Triggers>
</Style>
</RowDefinition.Style>
</RowDefinition>
<RowDefinition Name="GridRow2"
Height="*" />
</Grid.RowDefinitions>
<Expander x:Name="expanderOne"
Grid.Row="0">
<TextBox TextWrapping="Wrap"
VerticalScrollBarVisibility="Auto" />
</Expander>
<Expander Grid.Row="1">
<TextBox TextWrapping="Wrap"
VerticalScrollBarVisibility="Auto" />
</Expander>
</Grid>

Related

How to resize button content in WPF with a viewbox while maintaining the Font size?

I am creating an app and I need the content of a button to be resizable when the user minimises their screen. We know that the viewbox does this in WPF; it's the easiest way to resize text automatically.
This is the code for [the top part] of the button, I apologise about the formatting:
<Button Grid.Row="0"
Grid.Column="2"
Background="#3767B0"
Style="{DynamicResource IconStyle}"
BorderBrush="Transparent">
<Button.ContentTemplate>
<DataTemplate >
<Viewbox>
<TextBlock></TextBlock>
</Viewbox>
</DataTemplate>
</Button.ContentTemplate>
</Button>
What I want to get out of this is: to use the Viewbox in WPF to resize the content of this button while maintaining the font size of the content.
This resizes the content of the button, but the button's content is not maintained:
This is how it should look like with a viewbox, and should resize properly:
By maintaining I mean I want to use the viewbox whilst the content of the button (which is a child of the viewbox) looks exactly how it would've with a font size of 22. You can see how I want it to look like with a viewbox inside the content of the button in the image above. I've tried to be as clear as possible on this. Maybe I don't understand how the viewbox works?
Someone requested the icon style. Here is the icon style code:
<Style TargetType="Button"
x:Key="IconStyle"
BasedOn="{StaticResource ButtonStyle1}">
<Setter Property="FontFamily"
Value="Segoe MDL2 Assets" />
<Setter Property="Grid.RowSpan"
Value="2" />
<Setter Property="Padding"
Value="0,0,0,60" />
<Setter Property="Foreground"
Value="White" />
<Setter Property="FontSize"
Value="80" />
<Setter Property="Background"
Value="#307A85" />
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="15"
ShadowDepth="0"
Opacity="0.4"
Color="Black" />
</Setter.Value>
</Setter>
If I understand correctly what you need to implement, then remove the ViewBox and set the explicit dimensions of the TextBlock.
I am showing an arbitrary example, but for your task, you yourself choose the required dimensions and alignment.
<Button Background="#3767B0"
Style="{DynamicResource IconStyle}"
BorderBrush="Transparent">
<Button.ContentTemplate>
<DataTemplate >
<TextBlock Width="300"
Height="300"
FontSize="200"
Text=""/>
</DataTemplate>
</Button.ContentTemplate>
</Button>
Hello my good friends on Stack OverFlow. I have found a solution to this problem, all I had to do was set the padding of the TextBlock:
<!--FEEDBACK BUTTON-->
<Button Grid.Row="3"
Grid.Column="2"
Grid.RowSpan="2"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
BorderThickness="3"
Name="Feedback_Button"
BorderBrush="White"
Click="Button_Click"
MouseEnter="Button_MouseEnter"
MouseLeave="Button_MouseLeave">
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter Content="{TemplateBinding Content}" />
</ControlTemplate>
</Button.Template>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="218*" />
<RowDefinition Height="68*" />
</Grid.RowDefinitions>
<Button Grid.Row="0"
Grid.Column="2"
Background="#3767B0"
FontFamily="Segoe MDL2 Assets"
Foreground="White"
Content="Feedback"
BorderBrush="Transparent">
<Button.ContentTemplate>
<DataTemplate>
<Viewbox>
<TextBlock Padding="15"></TextBlock>
</Viewbox>
</DataTemplate>
</Button.ContentTemplate>
</Button>
<Button Grid.Row="4"
Grid.Column="2"
Background="#FF2D5BA0"
FontFamily="Segoe UI Light"
Style="{StaticResource TextButton}"
Content="Feedback"
BorderBrush="Transparent">
<Button.ContentTemplate>
<DataTemplate>
<Viewbox>
<TextBlock Padding="15">Feedback</TextBlock>
</Viewbox>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</Grid>
</Button>
<!--FEEDBACK BUTTON-->
Thank you my friends for your help, such a simple solution I would've expected you guys to know this.
Cheers,
#Tom Joney , I do not quite clearly understand what you need to implement, so I cannot give an exact answer.
General answer for using different layout.
The ViewBox scales the content to the maximum allowed size provided by the outer container.
The Padding property of a container sets the size of the border between the container and its contents.
The element's Margin property sets the size of the border between the element and its containing container.
That is, these are very close properties.
In our case, the main content is Text.
Therefore, there is no difference how to set the size of the border: between the Text and the containing TextBlock (TextBlock.Padding) or between the TextBlock and its containing outer container (the Grid line).
Look at two examples in which I set the background colors for better clarity.
Example with Padding
<Window x:Class="ViewBoxScaleText.PaddingWind"
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:ViewBoxScaleText"
mc:Ignorable="d"
Title="PaddingWind" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Background="LightGreen">
<Viewbox>
<TextBlock Padding="15"
Background="LightBlue"
Text="{Binding Text, ElementName=tb}"/>
</Viewbox>
</Border>
<TextBox x:Name="tb" Grid.Row="1" Margin="10" Text="Feedback"/>
</Grid>
</Window>
Example with Margin
<Window x:Class="ViewBoxScaleText.MarginWind"
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:ViewBoxScaleText"
mc:Ignorable="d"
Title="MarginWind" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Background="LightGreen">
<Viewbox>
<TextBlock Margin="15"
Background="LightBlue"
Text="{Binding Text, ElementName=tb}"/>
</Viewbox>
</Border>
<TextBox x:Name="tb" Grid.Row="1" Margin="10" Text="Feedback"/>
</Grid>
</Window>
The color of the regions shows that the containers have different sizes, but this does not affect the location and size of the Text.
Try to enter text in the field at the bottom of the window to see how the amount of text affects its size and the size of the border.
Since the ViewBox scales the entire content, both the text size size and are the border scaled.
If in the examples above you change the size of the window, you will see that the size of the container occupied by the text also changes.
This happens due to the fact that the setting of the border occurs inside the ViewBox and thus we set the size of the border, in fact, in units relative to the size of the text.
Changing the size of the text will change the size of the face and therefore change the overall container for the text.
Here is an example with the ability to change the font size in the very bottom margin of the window.
See how this affects the size of the border.
<Window x:Class="ViewBoxScaleText.FontSizeWind"
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:ViewBoxScaleText"
mc:Ignorable="d"
Title="FontSizeWind" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Background="LightGreen">
<Viewbox>
<TextBlock Margin="15"
Background="LightBlue"
Text="{Binding Text, ElementName=tbText}" FontSize="{Binding Text, ElementName=tbFontSize}"/>
</Viewbox>
</Border>
<TextBox x:Name="tbText" Grid.Row="1" Margin="10" Text="Feedback"/>
<TextBox x:Name="tbFontSize" Grid.Row="2" Margin="10" Text="80"/>
</Grid>
</Window>
Here are some more layout options in one XAML so that you can launch, check their behavior and choose the one that suits you
<Window x:Class="ViewBoxScaleText.MultiVariantWind"
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:ViewBoxScaleText"
mc:Ignorable="d"
Title="MultiVariantWind" Height="750" Width="400">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Background="LightGreen" Margin="5">
<Viewbox>
<TextBlock Margin="15"
Background="LightBlue"
Text="{Binding Text, ElementName=tbText}" FontSize="{Binding Text, ElementName=tbFontSize}"/>
</Viewbox>
</Border>
<Border Background="LightGreen" Margin="5" Grid.Row="1">
<Viewbox Margin="15">
<TextBlock
Background="LightBlue"
Text="{Binding Text, ElementName=tbText}" FontSize="{Binding Text, ElementName=tbFontSize}"/>
</Viewbox>
</Border>
<Border Background="LightGreen" Margin="5" Grid.Row="2">
<Viewbox Width="150" Height="150">
<TextBlock
Background="LightBlue"
Text="{Binding Text, ElementName=tbText}" FontSize="{Binding Text, ElementName=tbFontSize}"/>
</Viewbox>
</Border>
<Border Background="LightGreen" Margin="5" Grid.Row="3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15*"/>
<ColumnDefinition Width="70*"/>
<ColumnDefinition Width="15*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="15*"/>
<RowDefinition Height="70*"/>
<RowDefinition Height="15*"/>
</Grid.RowDefinitions>
<Viewbox Grid.Row="1" Grid.Column="1">
<TextBlock
Background="LightBlue"
Text="{Binding Text, ElementName=tbText}" FontSize="{Binding Text, ElementName=tbFontSize}"/>
</Viewbox>
</Grid>
</Border>
<TextBox x:Name="tbText" Grid.Row="4" Margin="10" Text="Feedback"/>
<TextBox x:Name="tbFontSize" Grid.Row="5" Margin="10" Text="80"/>
</Grid>
</Window>

Swiching the Stackpanel in single ViewModel Using Back/Next Button WPF

I have a WPF, with Form with multiple user required questions. I have created 2 Stackpanels which have similar layout, first form (Stackpanel) will let the user to fill up information.While second form (Stackpanel) would be preview form for the user before he submits.
XAML Code
<Window x:Class="NinjaLIB.View.SSOEMWarrantyButtonExtension"
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:NinjaLIB.View"
xmlns:lex="http://wpflocalizeextension.codeplex.com"
lex:LocalizeDictionary.DesignCulture="en"
lex:ResxLocalizationProvider.DefaultAssembly="NinjaLIB"
lex:ResxLocalizationProvider.DefaultDictionary="Resources"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
DataContext="{Binding Path=RMAView, Source={StaticResource Locator}}"
mc:Ignorable="d"
Title="Request RMA" Height="600" Width="1000"
xmlns:mvvmlight="http://www.galasoft.ch/mvvmlight"
xmlns:converter="clr-namespace:NinjaLIB.Converter"
WindowStartupLocation="CenterScreen" ResizeMode="NoResize">
<i:Interaction.Triggers>
<!--<i:EventTrigger EventName="Closed">
<mvvmlight:EventToCommand Command="{Binding GetRMAWindowClosed}" PassEventArgsToCommand="True" />
</i:EventTrigger>-->
<!--<i:EventTrigger EventName="Loaded">
<mvvmlight:EventToCommand Command="{Binding GetWarrantyWindowLoaded}" PassEventArgsToCommand="True" />
</i:EventTrigger>-->
</i:Interaction.Triggers>
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--Some QUestions asked to the User-->
<Grid Grid.Row="2">
<!--View Form Fill-->
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical">
<StackPanel.Style>
<Style TargetType="StackPanel">
<Setter Property="Visibility" Value="Visible"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ViewState}" Value="FormFillViewState">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
**<!--Some QUestions asked to the User-->**
</StackPanel >
</ScrollViewer>
**<!--View Preview Form-->**
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel>
<StackPanel.Style>
<Style TargetType="StackPanel">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ViewState}" Value = "PreviewFillState" >
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
**<!--Some QUestions asked to the User-->**
</StackPanel>
</ScrollViewer>
</Grid>
<Grid Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--Buttons-->
<Button Grid.Row="0" Content="Next"
IsEnabled="{Binding IsConnected}"
Command="{Binding NextCommandBtn}"
FontWeight="Normal"
HorizontalContentAlignment="Center"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Height="30"
Width="80"
Margin="780,0,0,2"
Padding="3,0"/>
<Button Grid.Row="0" Content="Back"
IsEnabled="{Binding IsConnected}"
Command="{Binding BackCommandBtn}"
FontWeight="Normal"
HorizontalContentAlignment="Center"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Height="30"
Width="80"
Margin="420,0,0,2"
Padding="3,0"/>
</Window>
==============
View Model Section Code
==============
private RMAViewModel RMAView;
private readonly ResourceManager rm;
public RMAViewModel()
{
rm = new ResourceManager("NinjaLIB.Properties.Resources", Assembly.GetExecutingAssembly());
}
//Properties for the Window (Date and Text) for FormFillViewState
//Properties for the Window (Date and Text) for PreviewFillState
==============
I wanted some help with view Model code, where if I click NextCommandBtn all the data will appear as filled up form from first stackpanel view and when I select BackCommandBtn i can edit the form.
You can think about it like this:
You have two views (StackPanels) and only one can be displayed at a time.
So in your view-model, you need a property that tells you which view is active. A simple bool property for each view would work. Since there are only two views, you could technically just use a single property, but using two will make your XAML data binding a little easier.
Examples:
IsFormActive
IsPreviewActive
In your XAML, you need to control the Visibility property of your two StackPanel controls based on your IsFormActive and IsPreviewActive properties in your view-model. You can do this with a value converter, specifically the BooleanToVisibilityConverter.
<StackPanel Visibility="{Binding IsFormActive,
Converter={StaticResource BooleanToVisibilityConverter}">
...
</StackPanel>
<StackPanel Visibility="{Binding IsPreviewActive,
Converter={StaticResource BooleanToVisibilityConverter}">
...
</StackPanel>
And back in your view-model you can control the state of IsFormActive and IsPreviewActive when the next and back buttons are clicked, etc.
I hope this helps you get an idea of how to proceed.

Custom validation error message overlapped with other control

I have create custom validator and error template. Error template is below.
<ControlTemplate x:Key="errorTmp">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="1" BorderBrush="Red" BorderThickness="1">
<AdornedElementPlaceholder x:Name="Adorner"/>
</Border>
<TextBlock Grid.Row="0" Foreground="Red" Text="{Binding ElementName=Adorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}" Margin="0,0,0,5"></TextBlock>
</Grid>
</ControlTemplate>
problem is error message is getting overlapped on other control.
You need to reserve space for the element in the adorner layer. You could do this by increasing the Margin property of the TextBox control itself when its Validation.HasError property returns true.
In this case you could set the top margin of the TextBox to the same height as the first row of the Grid in your Validation.ErrorTemplate:
<TextBox />
<TextBox Text="{Binding Username, UpdateSourceTrigger=PropertyChanged, ValidatesOnNotifyDataErrors=True}">
<Validation.ErrorTemplate>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="1" BorderBrush="Red" BorderThickness="1">
<AdornedElementPlaceholder x:Name="Adorner"/>
</Border>
<TextBlock Grid.Row="0" Foreground="Red" Text="{Binding ErrorContent}"></TextBlock>
</Grid>
</ControlTemplate>
</Validation.ErrorTemplate>
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<!-- increase the top margin of the TextBox in order for the error content not to overlap the control above -->
<Setter Property="Margin" Value="0 20 0 0" />
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
Since the rendering of an adorner is independent from rendering of the UIElement that the adorner is bound to, there is no way for the TextBox to automatically adjusts its position when adorner is visible. That's why you have to reserve the space for the adorner element explicitly yourself.
Another possible way is to directly include another element for error displaying and set its visibility based on HasErrors property, therefore positions of other elements could be automatically adjusted.
<TextBlock x:Name="TextBlockDate" DockPanel.Dock="Left" Text="{Binding Data}"/>
<TextBlock Foreground="Red" Text="{Binding ElementName=TextBlockData, Path=(Validation.Errors)[0].ErrorContent}" Visibility="{Binding Path=HasErrors, Converter={StaticResource BooleanToVisibilityConverter}}"/>

Show "pop up window" when is mouser over listBox item

I bind observable collection on listBox. I have data tempate on listbox item. It consit one image control and som textBlock.
If is mouse over on some listBox item I would like achieve this behavior:
Show PopUp/ToolTip (some "rectangle" with controls) and bind values from listBox current item.
And on textBox in item data template I have style, I would like change color of text in textBlock, for example from black to green.
Style is here:
<Style x:Key="FriedNickStyle" TargetType="TextBlock">
<Setter Property="Margin" Value="2,2,2,2"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="Foreground" Value="Black"/>
</Style>
Sory for my english, I have problem how describe this behavior correct. I try many thing but any of them doesn’t work good.
Here is it my style:
<DataTemplate x:Key="FriendListBoxItemTemplate">
<Grid Name="RootLayout">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
</Grid.RowDefinitions>
<Image Margin="4,4,4,2" Grid.Column="0">
<Image.Source >
<MultiBinding Converter="{StaticResource avatarConverter}">
<Binding Path="ProfilePhoto"></Binding>
<Binding Path="StatusInfo.IsLogged"></Binding>
</MultiBinding>
</Image.Source>
</Image>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock
Text="{Binding Path=Nick}"
Style="{StaticResource FriedNickStyle}"
Grid.Column="0" Grid.Row="0">
</TextBlock>
</Grid>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!--SHOW SOME POP UP WINDOW and bind properties from ITEM (VALUE)-->
<!--Change color of textBlock-->
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
Thank everybody who help me.
Well, I found this turorial, this article, by the MSDN and another stack overflow's question.
Basically, here's how:
<Popup Margin="10,10,0,13"
Name="Popup1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="194"
Height="200"
IsOpen="True"> // change this to open it
<TextBlock Name="McTextBlock" Background="LightBlue" >
This is popup text
</TextBlock>

WPF Style Setter * Height and Width

I'm trying to create a WPF application which consists of a 9x9 grid with the row and columns using different styles. What I'm hoping to do is provide a star value for the height and width of the column and row definitions. This does not appear to work in the current context. Is this even possible, and if so, how?
<Window x:Class="BaroqueChessUI.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="500" Width="500">
<Window.Resources>
<Style x:Key="LightBackground" >
<Setter Property="Control.Background" Value="Teal" />
</Style>
<Style x:Key="DarkBackground" >
<Setter Property="Control.Background" Value="Maroon" />
</Style>
<Style x:Key="FileStyle">
<Setter Property="Control.Width" Value="0.12" />
</Style>
<Style x:Key="RankStyle">
<Setter Property="Control.Height" Value="0.12" />
</Style>
<Style x:Key="FileHeadingStyle">
<Setter Property="Control.Width" Value="0.04" />
</Style>
<Style x:Key="RankHeadingStyle">
<Setter Property="Control.Height" Value="0.04" />
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Name="rdRank" Style="{StaticResource FileHeadingStyle}" />
<RowDefinition Name="rdRank1" Style="{StaticResource FileStyle}" />
<RowDefinition Name="rdRank2" Style="{StaticResource FileStyle}" />
<RowDefinition Name="rdRank3" Style="{StaticResource FileStyle}" />
<RowDefinition Name="rdRank4" Style="{StaticResource FileStyle}" />
<RowDefinition Name="rdRank5" Style="{StaticResource FileStyle}" />
<RowDefinition Name="rdRank6" Style="{StaticResource FileStyle}" />
<RowDefinition Name="rdRank7" Style="{StaticResource FileStyle}" />
<RowDefinition Name="rdRank8" Style="{StaticResource FileStyle}" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="cdFile" Style="{StaticResource RankHeadingStyle}" />
<ColumnDefinition Name="cdFile2" Style="{StaticResource RankStyle}" />
<ColumnDefinition Name="cdFile3" Style="{StaticResource RankStyle}" />
<ColumnDefinition Name="cdFile4" Style="{StaticResource RankStyle}" />
<ColumnDefinition Name="cdFile5" Style="{StaticResource RankStyle}" />
<ColumnDefinition Name="cdFile6" Style="{StaticResource RankStyle}" />
<ColumnDefinition Name="cdFile7" Style="{StaticResource RankStyle}" />
<ColumnDefinition Name="cdFile8" Style="{StaticResource RankStyle}" />
</Grid.ColumnDefinitions>
</Grid>
A grid column definition / row definition define layout, and within the defined areas you should add controls which should be styled (using the attached properties as you are could get tedious), so try not styling the rowdefintions / columnsdefinitions themselves.
Styling Items:
You can enter a control into a row / column like so (sorry if i'm patronizing):
<Rectangle Grid.Row="0" Grid.Column="0" ></Rectangle>
Then define the Style on the control within the Row/Column.
<Rectangle Grid.Row="0" Grid.Column="0" Style="{StaticResource DarkBackground}"></Rectangle>
Sizing (Star Values):
Note: that the Grid will dynamically fill the available area as your code stands and you will only need to apply star values if you define a fixed height and width to the Grid and want proportional allocation of remaining space.
In other words... with regards to achieving "star value":
What I'm hoping to do is provide a
star value for the height and width of
the column and row definitions.
Why not just enter the value like so to your definitions?:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Name="rdRank" Height="500" />
<RowDefinition Name="rdRank1" Height="60*" />
<RowDefinition Name="rdRank2" Style="40*" />
</Grid.RowDefinitions>
</Grid>
In this example the rowdefinition named "rdRank" would have a fixed height of "500", and the remaining space would be allocated to "rdRank1" which would take up 60% and "rdRank2" 40%.
**Attached Properties: **
In your style:
<Style x:Key="RankStyle">
<Setter Property="Control.Height" Value="0.12" />
</Style>
You are stating any control within the item this style is applied to that has a property called Height should take the value of 0.12. Control.Height will end up filtering down so to speak.
If you are aiming to achieve a height of 0.12* on the Row use:
<Style x:Key="NewRankStyle" TargetType="{x:Type RowDefinition}">
<Setter Property="Height" Value="0.12*" />
</Style>
..
<Grid>
<Grid.RowDefinitions>
<RowDefinition Name="rdRank" Style="{StaticResource FileHeadingStyle}" />
<RowDefinition Name="rdRank1" Style="{StaticResource NewRankStyle}" />
Using a 'TargetType' allows you to target Type specific properties and as a result allows use of Star Values.
Hope this clears up a few concepts for you.
The row or column star sizing only works if you give the grid a width and height. If the grid is auto-sizing based on its content, then star sizing doesn't work.

Resources