Develop Reference

How to bind to a control's literal actual width (including its margins)?

According to some folks, the actual width is obtained using ActualWidth attribute as shown in the example below. It makes sense but I seem to experience contradicting behavior.
<Canvas Width="{Binding ActualWidth,ElementName=Expy}">
<Expander x:Name="Expy"
HorizontalAlignment="Left"
Margin="0,0,0,0"
VerticalAlignment="Top" ...>
...
</Expander>
</Canvas>
In the setup above, the behavior is consistent with the expectations and, although tightly squeezed together, the next element in the panel containing the canvas is not overlapped by it's predecessor.
However, if I change the margins to a bit wider, I can clearly see that the canvas intrude on the next element, estimatingly by the same number of pixies that I requested in the margin attribute. So it'd appear that the ActualWidth isn't the actual width but the width without the margin.
Am I confusing something here and if so, what?
How to obtain and bind to the actaully actual, rendered width?

The linked answer says:
ActualWidth accounts for padding and margins ...
This is incorrect. The ActualWidth includes only the padding, not the margin (same with ActualHeight).
A comment that has been left on that answer by somebody else provides the appropriate correction.
This XAML code illustrates the issue:
<Window x:Class="..."
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<TextBlock x:Name="First" Text="Some text" Padding="10" Margin="0,0"
HorizontalAlignment="Left" Background="Yellow" />
<TextBlock Text="{Binding ActualWidth, ElementName=First}" />
<TextBlock x:Name="Second" Text="Some text" Padding="10" Margin="10,0"
HorizontalAlignment="Left" Background="LimeGreen" />
<TextBlock Text="{Binding ActualWidth, ElementName=Second}" />
</StackPanel>
</Window>
If you run this you will see that both of the "Some text" text blocks have the same ActualWidth value despite the second one having horizontal margins applied to it.
You asked how you could take this into account. There is no way of doing this through binding because the ActualWidth property doesn't include the margin as already stated. What you can do is apply the margin to the parent element (the canvas) instead of applying it to the expander.
In other words, instead of doing this:
<Canvas Width="{Binding ActualWidth,ElementName=Expy}">
<Expander x:Name="Expy" ... Margin="10" ... >
...
</Expander>
</Canvas>
do this:
<Canvas Width="{Binding ActualWidth,ElementName=Expy}" Margin="10">
<Expander x:Name="Expy" ... >
...
</Expander>
</Canvas>

Yes Konrad. You are confusing.
Whenever we mean Actual(Height/Width), it is the rendered one. You were correct in that. However, Actual(Height/Width) values gets initialized after the WPF Layout process which includes Measure and Arrange stages and that is something you need to understand first to get to the real cause of the problem.
At first, Binding anything with Actual values will never give you desired results because by doing this you are violating WPF Layout chain. As per WPF Layout stages, in Measure stage WPF gets the specified size (for e.g. values specified in height and width) for each control in the layout and then in the Arrange stage it actually allocates controls to the layout in the best possible way. The size specified is subject to vary after the Arrange stage.
Also, it should be noted that Actual parameters include rendered size plus padding value (but not margin). In your example, I guess the other panel next to the Expander control is the reason behind the problem you reported. I can confirm only when I see the entire layout.
But as a precautionary measure, you can always stop using Actual parameters for bindings. You can definitely get it worked out using Width and Height values for binding.

You cannot include the margin to your ActualWidth. A solution for this would be to use DesiredSize.Width or DesiredSize.Height. This will take into account the Margin. But it's a UIElement.

Forcing a ListBox to re-render

Background:
I have a ListBox containing items defined by DataTemplates. Right now, if an object in the list has the property IsEditable set to true, the item's property information will be displayed inside of textboxes (via DataTemplate change), instead of textblocks (so the user can edit the content of that list item)
IsEditable is toggled on/off by a button inside of each list item. I have been told that we need to keep the state of all objects consistent, which means I can't just rebind the ItemsSource and lose everything.
Currently, I'm using this to re-render:
this.lbPoints.Dispatcher.Invoke(DispatcherPriority.Render, new Action(() => { }));
Question:
The aforementioned code snippet KIND OF does its job. By "kind of", I mean, it does eventually cause my data to become re-rendered, but only when I scroll to the bottom of the list and then scroll back up to the item i'm trying to re-render.
1) How can I re-render the data immediately without having to scroll around to get it to show up?

The guys commenting are right that you're going about this the wrong way... there is rarely a need to force a ListBox to re-render. You're probably causing yourself some additional grief trying to switch the DataTemplates (although it is possible). Instead of that, think about data binding the TextBox.IsReadOnly property to your IsEditable property:
<TextBox IsReadOnly="{Binding IsEditable}" Text="{Binding Text}" />
Another alternative is to use a BooleanToVisibilityConverter to show a different Grid in your DataTemplate when your IsEditable property is true. Unfortunately, that Converter doesn't have an inverse operation, so you could create an IsNotEditing property to bind to the Grid in the DataTemplate that is originally displayed. I'm not sure if that's clear... see this example:
<DataTemplate DataType="{x:Type YourPrefix:YourDataType}">
<Grid>
<Grid Visibility="{Binding IsNotEditing, Converter={StaticResource
BooleanToVisibilityConverter}}">
<!-- Define your uneditable UI here -->
</Grid>
<Grid Visibility="{Binding IsEditing, Converter={StaticResource
BooleanToVisibilityConverter}}">
<!-- Define your editable UI here -->
</Grid>
</Grid>
</DataTemplate>
You could also define your own BooleanToVisibilityConverter class that has an IsInverted property, so that you can just use the one IsEditing property. You'd need to declare two Converters still, like this:
<Converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
<Converters:BoolToVisibilityConverter x:Key="InvertedBoolToVisibilityConverter"
IsInverted="True" />
Then your XAML would be like this:
<Grid Visibility="{Binding IsEditing, Converter={StaticResource
InvertedBoolToVisibilityConverter}}">
<!-- Define your uneditable UI here -->
</Grid>
<Grid Visibility="{Binding IsEditing, Converter={StaticResource
BoolToVisibilityConverter}}">
<!-- Define your editable UI here -->
</Grid>

WPF Issues with binding to styled button

I have created a RadioButton style which I use across my application. The display part of which uses the content presenter to display whatever content I added to the button:
<ContentPresenter>
<ContentPresenter.ContentTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{TemplateBinding Content}" />
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
I'm then attempting to bind a decimal with a string formatter to the styled button like so:
<RadioButton Content="{Binding Stake, StringFormat={}{0:C}}" Style="{DynamicResource NeutralSelectorButtonStyle}" />
Stake is a decimal within a ViewModel which is set as the DataContext. When I run this up the content coming through is blank.
I made a change using a label in the DataTemplate rather than a TextBlock, this displayed the decimal but had not formatted it.
Can anyone explain why this is happening and possibly provide a solution.
If you require any more information just ask :)
Thanks in advance.

You are almost there just instead of setting the string format inside binding you should use ContentStringFormat property when in ContentControls.
Take a look at this Label (it works with any content control):
<Label Content="{Binding Path=MaxLevelofInvestment}" ContentStringFormat="Amount is {0}"/>
ContentPresenter also has this property:
http://msdn.microsoft.com/en-us/library/system.windows.controls.contentpresenter.contentstringformat%28v=vs.110%29.aspx
Try it out. I hope it works for you.

How to display a Button which hosts TextBlock with the style PhoneTextSubtleStyle?

I need to create a button with two lines of text:
The first one is Command Title like "Save"
The second one is a Description of the Command like "The application state will be saved"
So I have written the next xaml:
<Button Margin="0,128,0,0" Padding="10,5" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<StackPanel Margin="0" UseLayoutRounding="False">
<TextBlock FontSize="{StaticResource PhoneFontSizeMediumLarge}" FontFamily="{StaticResource PhoneFontFamilySemiBold}">Save</TextBlock>
<TextBlock Style="{StaticResource PhoneTextSubtleStyle}" Margin="0">The application state will be saved</TextBlock>
</StackPanel>
</Button>
This code working well except a one issue. The Description line becomes invisible when the button is pushed.
I'm sure the root cause is the low contrast color of the description line. But I don't know how to fix it.
Update: I have tried to use the PhoneTextSubtleStyle style but still have the same issue.

You could retemplate the Button (using the Control.Template property) to look different so that when pushed it no longer interferes with the content.

Could you try something like this
System.Windows.Visibility.Visible;
System.Windows.Visibility.Hidden;
or
System.Windows.Visibility.Collapsed
here is a link that will show an example of how to use this inside of a StackPanel
How to: Change the Visibility Property

Editing child objects of a combo box using c# and Wpf

Backgorund
I am currently writing a program that allows a user to select a manufacture from a combo box. The combo box is created in wpf using the following wpf code segment:
<ComboBox Height="23" Margin="40.422,128.423,229.908,0" Name="itemProductManufacture" ToolTip="Click to open drop down menu" VerticalAlignment="Top" Text="Select A Manufacture" SelectionChanged="itemProductManufacture_SelectionChanged" DropDownOpened="itemProductManufacture_DropDownOpened">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ManufactureId}" Width="0"/>
<Image Name="itemManufactureImage" Source="{Binding ManufactureImage}" Height="15" Width="70" Stretch="Uniform"/>
<TextBlock Text="{Binding ManufactureName}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
The data is provided form a database and each entry has a Image, a name and an Id (intentionally not shown)
Problem
I am trying to code the behaviour of the combo box so when it is open the image height is 50 and when it is closed it is 15 this is so the image is larger when it is first displayed and then smaller once selected so it doesn't take up too much space on the form.
I have tried editing the image propities using code but am unable to accsess it using its name or any other children of the combo box.
Thanks
Jonathan

As you are using data template you won't be able to access the directly by its name.
Try something like this -
Image image = this.itemProductManufacture.ItemTemplate.FindName("itemManufactureImage", this) as Image;
One thing I am not clear is whether you want to change image size for all the items or the selected one? If you need to access the image for a particulat item in combobox you may have to use the ItemContainerGenerator.ContainerFromItem, as explained in following posts -
WPF - ItemsControl - How do I get find my "CheckBox" item that is in the ItemTemplate?
http://www.sitechno.com/Blog/HowToUseAttachedPropertiesAsAnExtensionMechanismForACheckedListbox.aspx
look at this, To know the various ways of finding controls - How can I find WPF controls by name or type?

You can edit image properties from code using binding. Or you can use triggers in Datatemplate. When comboboxitems checked properties change, you can change height property of corresponding image

Try this:
<Image Height = "{Binding Path=IsDropDownOpen,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type ComboBox}},
Converter={StaticResource myBoolToHeightConverter}}" />
An example for Converter here