How is the attached property TextBlock.FontSize used? - wpf

I have the following simple code (see below) I copied from a book. But I have a couple of questions about the line <Grid TextBlock.FontSize="48">.
From what I gather, TextBlock.FontSize is an attached property but I initially thought that attached properties were meant to reference parent objects (i.e. when the Grid.Row attached property references the parent Grid element). But from how it is used here it may be that my understanding is incorrect? Is this an attached property and if so can it be used for child elements?
Second, TextBlock.FontSize is set on the grid. But, no where in the xaml do I use a TextBlock element (that I know of). I only used Buttons with Content defined. Yet if I change the TextBlock.FontSize to a different value the font size changes. Therefore, how is TextBlock.FontSize being used? Where is the TextBlock?
Thank you in advance.
<Window x:Class="UseAGrid.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid TextBlock.FontSize="48">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="250" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.RowSpan="2"
Content="2 Rows" />
<GridSplitter Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="1"
Width="1"
Background="Green"
ResizeBehavior="PreviousAndNext"
ResizeDirection="Columns" />
<Button Grid.Column="2"
Grid.ColumnSpan="2"
Content="2 Columns" />
<Button Grid.Row="1"
Grid.Column="2"
Content="1,2" />
<Button Grid.Row="1"
Grid.Column="3"
Content="1,3" />
</Grid>
</Window>

TextBlock.FontSize is not an attached property, it's just a regular dependency property. The MSDN documentation is pretty good at listing attached properties for a control and FontSize is not one of them (it doesn't even have any).
It is however an inheritable property. Look at the dependency property information for it and you'll see that it inherits its value. What this allows us to do is set the value of the property in an ancestor and all descendant controls that relies on this property will inherit the same value as long as they don't explicitly set the value to something else.
The controls it applies to doesn't have to be explicitly instantiated by you, it also applies to styles, templates, content presenters, etc. So in your case, the content of your buttons is text so the TextBlocks used to display that text will also inherit the font size.
See Property Value Inheritance for more information.

Related

WPF: Star in ColumnDefinition not expanding columns

I have a user control that need the 1st and 3rd column to have the same width at all time.
My code is a follows:
<UserControl x:Class="UserControls.ListBoxSelector"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListBox x:Name="ListBox_Source" Grid.Column="0" Grid.Row="0" />
<StackPanel Grid.Column="1" Grid.Row="0" Orientation="Vertical">
<Button Content=">" Click="Button_Add_Click"/>
<Button Content="<" Click="Button_Remove_Click" />
</StackPanel>
<ListBox x:Name="ListBox_Destination" Grid.Column="2" Grid.Row="0" />
</Grid>
</UserControl>
The result is not as expected as column 3 (ListBox_Destination) is not expanded at all.
Isn't the 5* in ColumnDefinition enough to force the 2 listbox to the same width??
UPDATED : Sorry that I forgot to mention that the problem only occurs when I put the control inside a RibbonGroup using Microsoft Ribbon for WPF
Sometimes, when you put your control in certian types of layout controls (like a StackPanel), it won't size as expected because the parent layout will only size the child to it's minimum desired size (just enough to show the content). This may be why you are seeing this when you put it in the RibbonGroup. Try giving your Grid a Width or MinWidth and see if that makes a difference.
yes it forces the columns 1 and 3 to be of the same size, but it doesnt gaurentee the content (listboxes) inside the colulms will be of the same size. You have to set the size of content to take up whole space

Wpf Resize object with window

Looked around to find a way to resize bind with the windows resize without explicitly telling my object to grab the windows size.
Here is the code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<WindowsFormsHost Background="{x:Null}" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" Name="windowsFormsHost1" VerticalAlignment="Top" Margin="-1,0,0,0">
<wf:Panel x:Name="pnlLivePreview" />
</WindowsFormsHost>
</Grid>
This was followed by the example showed here
Edit: Question: Why doesn't panel resize with the window ?
Simply remove the explicit Width and Height settings, and the HorizontalAlignment and VerticalAlignment settings, thus:
<WindowsFormsHost Background="{x:Null}"
Name="windowsFormsHost1"
Margin="-1,0,0,0">
<wf:Panel x:Name="pnlLivePreview" />
</WindowsFormsHost>
I'm going to throw a wild guess here, but since this is a WinForms panel, try setting it's Dock property to Fill thus:
<wf:Panel x:Name="pnlLivePreview" Dock="Fill" />
Really not sure it would work, if it doesn't work in markup, try doing it in code.
Bind your Height/Width to your window's height/width
<Window x:Name="Root_Window">
<Grid Height="{Binding ElementName=RootWindow, Path=ActualHeight}"
Width="{Binding ElementName=RootWindow, Path=ActualWidth}">
<!-- Content Here -->
</Grid>
</Window>
The answer: Problem is not the panel but the api used to create the content of it.

WPF TabControl Children

This is my current Scenario: I have several UserControls inside different TabItems on a single TabControl in a WPF Window. Something Like:
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="S.C.A.R" WindowState="Maximized">
<TabControl Name="MainTabControl">
<TabItem Name="TabOps">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="30"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Local:ServiceList Height="Auto" CanInsert="True" CanCollapse="True" Grid.ColumnSpan="3" x:Name="SL" RecordState="Edit"/>
<Local:ReservationList CanCollapse="True" Grid.Row="1" RecordState="Edit" x:Name="RL"/>
<Local:DriverList CanDelete="False" CanInsert="False" CanCollapse="True" Grid.Row="1" Grid.Column="2" RecordState="Edit" x:Name="DL"/>
<Local:CustomerForm CanDelete="False" CanInsert="False" Grid.Row="2" Grid.ColumnSpan="3" RecordState="View" x:Name="CL"/>
</Grid>
</TabItem>
<TabItemItem Name="TabCodes">
<Local:CustomerList x:Name="CustomerCRUD" RecordState="View"/>
</TabItem>
<Button Grid.Row="1" Content="TEST" Click="Button_Click"/>
</Grid>
</Border>
</Window>
Sorry for the indentation. For some reason I can't get the code properly indented here :(
What I need to do is to determine (preferably in the TabControl.Load Method, which of my different UserControls are currently visible. I need to do this in a dynamic way, I cannot hardcode the relationship between the TabItems and their children, something like:
if (TabControl.SelectedItem is XXXX)... is not possible here, because this is a Dynamic UI and I have no way to know which controls are there up front.
I've been digging a little bit and found out that the TabItem controls do not appear in the Visual tree of their "children". I only see a ContentPresenter, and then the TabControl itself. It looks like the tabItems do not "contain" their own content, so I could not, for example, do a FindAncestor to the Tab Items.
Another interesting fact is that the Loaded event of my usercontrols is being called on startup. Regardless of whether or not they're visible on screen.
An ideal scenario will be to find an event that is only fired on my Usercontrols when the TabItem they are under gets selected.
Appreciate any ideas. Thanks in advance
You should be able to leverage the VisualTreeHelper and consequentrly this answer on SO to provide the TabItem.Content returned object and look for the your specified type, UserControl in this instance.
NOTE:
For additional details please see the comments which transpired in the SO's question.

WPF buttons same/recommended width

Suppose you have a window with multiple buttons such as Ok/Cancel or Yes/No/Cancel. All the buttons need to be the same width. Obviously this could be done by just guessing a number and hardwiring all of them to that number.
Is there a better way to do it, one that would take into account preferred/recommended sizes (just how wide should an Ok button be anyway? This is not a rhetorical question, I actually don't know the answer!), what's needed by the text of the longest caption, what happens if the font size is increased etc?
Another, perhaps simpler, way to do this is to use the SharedSizeGroup property on the ColumnDefinition and RowDefinition classes.
Columns (and Rows) in a WPF Grid can automatically resize to fit their contents - when SharedSizeGroup is used, columns with the same group name share their resizing logic.
The Xaml would look something like this ...
<Grid Grid.IsSharedSizeScope="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Content="Ok"
Margin="4" />
<Button Grid.Column="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Content="Cancel"
Margin="4" />
<Button Grid.Column="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Content="Long Button Caption"
Margin="4" />
</Grid>
There are several ways to do this:
1) Use a Grid for layout. Each Button gets its own Column, which is Star-sized. That way, all columns are the same size:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0">Yes</Button>
<Button Grid.Column="1">No</Button>
<Button Grid.Column="2">Cancel</Button>
</Grid>
2) You can have one item as "master size" and bind the width of all others to this item's width.
<StackPanel Orientation="Horizontal">
<Button Name="MasterButton" Width="100">Yes</Button>
<Button>
<Button.Width>
<Binding ElementName="MasterButton" Path="Width"/>
</Button.Width>
No
</Button>
</StackPanel>
EDIT: In actual code, you probably will have Width="Auto". Since the other widths are based on the "master width", the button with the widest width (widest text) should be chosen.
Use a "master" control, like in Daniel's answer, but bind to the "ActualWidth" attribute instead of "Width":
<StackPanel Orientation="Horizontal">
<Button Name="MasterButton">Yes</Button>
<Button>
<Button.Width>
<Binding ElementName="MasterButton" Path="ActualWidth"/>
</Button.Width>
No
</Button>
</StackPanel>
This way, the value is taken from the master control at run time, after minimum and maximum width and all other layout calculations have been taken into account. Binding to "Width" binds to whatever you happen to put into the attribute at compile time, which may not be the width that is really used.
Also, the binding can be written shorter like
<Button Width="{Binding ElementName=MasterButton, Path=ActualWidth}"/>
According to the MS User Experience Interaction Guidelines for Windows 7 and Windows Vista (p61), standard dimensions for command buttons are 50x14 DLU actual size (75x23 pixels). The guidelines further suggest you "try to work with [these] default widths and heights." Obviously, if you need more width to fit a clear label, then take more width.
These answers are great if you have a fixed number or fixed layout for the buttons, but if like me there is a dynamic number of buttons coming from a binding and contained in a ItemsControl then this is not feasible. But there is a simple way and it still involves used the sharedsize property of Grid.
DataTemplate:
<DataTemplate x:Key="ODIF.Mapping">
<Button HorizontalContentAlignment="Left" Background="#FFEEEEEE" BorderBrush="#FFBDBDBD">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="PluginButtonsWidth"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" SharedSizeGroup="PluginButtonsIconHeight"/>
<RowDefinition Height="Auto" SharedSizeGroup="PluginButtonsNameHeight"/>
</Grid.RowDefinitions>
<Image Width="32" Height="32" Source="{Binding PluginIcon}" RenderOptions.BitmapScalingMode="HighQuality"/>
<TextBlock Grid.Row="1" Text="{Binding PluginName}"/>
</Grid>
</Button>
</DataTemplate>
Parent container:
<ItemsControl ItemsSource="{Binding MappingPlugins, ElementName=page}" ItemTemplate="{StaticResource ODIF.Mapping}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Grid.IsSharedSizeScope="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Essentially the button's content can itself be a Gird which then you can place your labels and icons as needed in, but even though the buttons do not reside in the same grid (they each are their own) the grid can still share it size so long as you set the root container's (ItemsControl) property of Grid.IsSharedSizeScope to True.
This will force the content grid of each button to be the same exact size based on the largest one while not having to have the Buttons themselves in a predefined grid.
In the most general case, you want to create a
Style in your section, then apply this style as desired. Now when you change the style, all buttons change.
Or you can change the Content of the button so that it autosizes to the text.

Allow TextBox to be resized but not to grow on user input

I have a TextBox defined inside a window like so:
<Window x:Class="NS.MainWindow"
...
SizeToContent="WidthAndHeight">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition MinWidth="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MinHeight="50" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">Description:</TextBlock>
<TextBox Grid.Column="1" Grid.Row="0" TextWrapping="WrapWithOverflow" />
</Grid>
</Window>
The problem is that when the user types in the TextBox it expands to the right since only the MinWidth is set. What I really want is the text to wrap to the next line. I can get it to do this if I change the MinWidth on the column to be Width instead. However if I do this, then the TextBox no longer resizes when the Window is resized.
Is there a way I can have both? (i.e. resize only on Window resize, otherwise wrap)
The reason you're having this behavior is because you've set the Window's SizeToContent property - which basically authorizes the Window to resize itself based on the size requested by its content. So as you type in more stuff, the textbox says I need more space, the window obediently grows. Your textbox would not grow if you don't set the SizeToContent property.
So I'd say lose the SizeToContent property setter & Use proportional grid sizing. Here I say make Column#2 twice the width of Column#1. The default "Stretch" value of HorizontalAlignment and VerticalAlignment for the Grid should ensure that your controls resize correctly on a window resize.
<Window ...
Title="MyWindow" WindowStyle="ToolWindow" ResizeMode="CanResizeWithGrip"
MinWidth="300" Width="300" Height="80">
<Grid x:Name="myGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" MinWidth="100"/>
<ColumnDefinition Width="2*" MinWidth="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MinHeight="50" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">Description:</TextBlock>
<TextBox Grid.Column="1" Grid.Row="0" TextWrapping="WrapWithOverflow"/>
</Grid>
If you just add the SizeToContent property setter back to above code snippet... you'd see some weird behavior where the textbox initially grows with text content.. however if you resize the window once.. the textbox would stop growing. Strange... can't explain that behavior.
HTH
WPF's TextBox doesn't seem to have that option built-in.
To solve this problem, you can use a custom TextBox that reports a desired (0, 0) size. It's an ugly hack, but it works.
In your MainWindow.xaml.cs file:
namespace NS
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
...
}
// Ugly HACK because the regular TextBox doesn't allow autoresize to fit the parent but NOT autoresize when the text doesn't fit.
public class TextBoxThatDoesntResizeWithText : TextBox
{
protected override Size MeasureOverride(Size constraint)
{
return new Size(0, 0);
}
}
}
Then, in your MainWindow.xaml file:
<Window x:Class="NS.MainWindow"
...
xmlns:local="clr-namespace:NS"
SizeToContent="WidthAndHeight">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition MinWidth="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MinHeight="50" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">Description:</TextBlock>
<local:TextBoxThatDoesntResizeWithText Grid.Column="1" Grid.Row="0" TextWrapping="WrapWithOverflow" />
</Grid>
</Window>
Change the second ColumnDefinition to be Width="*".

Resources