I don't know why Image crosses grid right border, how to repair it?
Code looks like that:
<Grid>
<Grid Name="grid1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="260" />
<ColumnDefinition Width="640" />
</Grid.ColumnDefinitions>
<Image Grid.Column="1" HorizontalAlignment="Stretch" Margin="0" Name="image1" Stretch="Fill" VerticalAlignment="Stretch" Source="path.png"/>
<ListView Height="361" HorizontalAlignment="Left" Margin="10,10,0,0" Name="listView1" VerticalAlignment="Top" Width="240" ItemsSource="{Binding}" />
<Button Content="Add New Gesture" Height="39" HorizontalAlignment="Left" Margin="10,387,0,0" Name="button1" VerticalAlignment="Top" Width="112" Click="button1_Click" />
<Button Content="Delete" Height="39" HorizontalAlignment="Left" Margin="191,387,0,0" Name="button2" VerticalAlignment="Top" Width="59" />
<Button Content="Modify" Height="39" HorizontalAlignment="Left" Margin="128,387,0,0" Name="button3" VerticalAlignment="Top" Width="57" />
</Grid>
</Grid>
This looks like an effect of the fixed widths you have set (Maybe the sum of your fixed column widths is greater than the fixed window width?) That would cause the grid cell (and image) to go out of the view.
If you want the image to fill the entire space remaining in the window, change your second ColumnDefinition width to "*" instead of 640:
<ColumnDefinition Width="*" />
EDIT: It turns out this is wrong and it is not a viable solution. Sorry
Ok, so it is really unclear what exactly is your problem. If you provide some more details, people will be able to help you more easily.
From what I can understand (and this might completely wrong), by saying that the image "crosses grid right border" you mean that the image should only show in one column, but it 'overlfows' into the next column.
This can be avoided by adding the following attribute to the Image control:
Grid.ColumnSpan="1"
So it will be:
<Image Grid.Column="1" Grid.ColumnSpan="1" HorizontalAlignment="Stretch" Margin="0" Name="image1" Stretch="Fill" VerticalAlignment="Stretch" Source="path.png"/>
This will prevent the image from overflowing into other columns, and constrain to the one it is positioned in. As i said before I'm not completely sure I understand your problem, but if you provide some more detail I will gladly try to revise my answer to better help you. Right now though, this is the best I can do.
Related
Learning basic concepts of WPF before moving to UWP. Following XAML in my WPF project is showing the windows as below.
I'm trying to display the Rectangle and Button on the right side of the StackPanel and need the Rectangle (not the Button) control to auto fill the StackPanel.
I tried the HorizontalAlignment="Stretch" with no Width attribute but without Width attribute the entire rectangle shrinks to 0 width. Don't want to hard code the width value (if possible) so that window of the app adjust itself depending on the device it's on (screen resolution). But if that scenario is still possible with hard coded width value as well please let me know that approach as well.
Window:
XAML:
Remark: I don't think ListBox is playing any role (related to this post). Only controls inside the ListItemsControl on above ListBox probably need proper adjustment. but I may be wrong.
<Window x:Class="WPFProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="376"
Width="337">
<Grid>
<ItemsControl>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Height="10">
<Rectangle x:Name="myRectangle" Fill="#FFF4F4F5" HorizontalAlignment="Right" Height="9" Margin="0,0,0,0" Stroke="Black" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.533,0.6"/>
<Button Content="" HorizontalAlignment="Right" Height="10" VerticalAlignment="Top" FontSize="5" FontWeight="Bold"/>
</StackPanel>
</ItemsControl>
<ListBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,11,0,81" ScrollViewer.HorizontalScrollBarVisibility="Disabled" x:Name="myList" SelectionChanged="myList_ContextMenuClosing">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Rectangle Fill="{Binding FirstName}" ToolTip="{Binding FullName}" Width="20" Height="20" Stroke="#FF211E1E" OpacityMask="Black" StrokeThickness="1" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button x:Name="btnTest" Content="Test" HorizontalAlignment="Left" Margin="250,298,0,0" VerticalAlignment="Top" Width="75" Click="BtnTest_Click"/>
</Grid>
</Window>
Two things here:
When you use Stackpanel with horizontal orientation, horizontalalingment="stretch" can't be used. That is because all of the elements are being Stacked with their designed width.
You are specifying a fixed width of 100 for your rectangle. If you do that it will not stretch anymore even if you use stretch for alignment. Also the horizontalalingment="stretch" needs to be placed on the element you are expecting to stretch, not the Panel.
For things like this use DockPanelor a Grid instead.
Read more about WPF panels here:
https://wpf-tutorial.com/panels/introduction-to-wpf-panels/
Here is an example for Grid:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="myRectangle" Fill="#FFF4F4F5" HorizontalAlignment="Stretch" Height="9" Margin="0,0,0,0"
Stroke="Black" VerticalAlignment="Top" RenderTransformOrigin="0.533,0.6" Grid.Row="0"/>
<Button Content="" HorizontalAlignment="Right" Height="10" VerticalAlignment="Top" FontSize="5" FontWeight="Bold" Grid.Column="1"/>
</Grid>
Notice the width="*" attribute means the cell will use all the remaining space. If you have multiple rows/columsn defined with * the space will be divided between them.
Stack Panel acts like a stack of things placed one after another. It can be horizontal or vertical. Unlike Grid you cannot access particular place in a stack panel, every next element will be placed after one another in a sequence.For your requirement a StackPanel is not suitable unless you need to have horizontal scrolling. You should try a DockPanel or Grid instead like
<Grid Height="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<!--first column of grid-->
<Rectangle Grid.Column="0" x:Name="myRectangle" Fill="#FFF4F4F5" Height="9" Margin="0,0,0,0" Stroke="Black" VerticalAlignment="Top" RenderTransformOrigin="0.533,0.6"/>
<!--second column of grid-->
<Button Grid.Column="1" Content="" HorizontalAlignment="Right" Height="10" VerticalAlignment="Top" FontSize="5" FontWeight="Bold"/>
</Grid>
I have this very simple ChildWindow:
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" />
<Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />
<ScrollViewer Width="378">
<StackPanel>
<TextBlock x:Name="txtFracture" HorizontalAlignment="Left" Margin="10,10,10,10" TextWrapping="Wrap" VerticalAlignment="Top" Width="358"/>
</StackPanel>
</ScrollViewer>
</Grid>
My problem is that the text in the TextBlock is getting clipped on the right side. (I originally didn't have the StackPanel in there - that was just an experiment.) I have added more and more to the Margin.Right, but it doesn't help. The Scroll bar itself isn't stepping on the text, the text just drops a bunch of pixels as it gets to the right of the block. Sometimes, it isn't even whole letters that are getting clipped. See anything?
Also, if I change the HorizontalAlignment from Left to Center, I get the pixel-clipping on both sides of the block.
Also, if I remove the ScrollViewer altogether, the clipping is still there, so it isn't his fault, either.
I notice you have texblock width as constant and you need margin of 10 on all side. In this case ScrollViewer ScrollBar clips your TextBlock.
Possible solution is
1. Remove width on textblock and set alignment stretch.
try this
<ScrollViewer Width="378" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<TextBlock x:Name="txtFracture" HorizontalAlignment="Stretch" Margin="10,10,10,10" TextWrapping="Wrap" VerticalAlignment="Stretch"
Text="Testing"/>
</ScrollViewer>
Turns out that this works:
<ScrollViewer Width="378" >
<StackPanel>
<TextBlock x:Name="txtFracture" Margin="10,10,10,10" TextWrapping="Wrap" />
</StackPanel>
</ScrollViewer>
As far as I can tell, the actual culprit was the explicitly set TextBlock Width.
Here's an image of what I'm trying to achieve within a grid view column:
The text is wrapping as expected and the closing double-quote image is displayed correctly. But if I reduce the column width fractionally I get this:
Notice how the closing double-quote image is being clipped.
The essence of the XAML I'm using is shown below, although it is merely the latest variant in a set of equally inadequate attempts.
<DockPanel LastChildFill="False" MinWidth="50">
<ContentControl
Content="{StaticResource DoubleQuotesOpenImage}"
VerticalAlignment="Top"
MinWidth="16"
DockPanel.Dock="Left" />
<TextBlock
FontSize="13"
TextWrapping="Wrap"
Text="{Binding TextRepresentation}"
VerticalAlignment="Center"
DockPanel.Dock="Left" />
<ContentControl
Content="{StaticResource DoubleQuotesCloseImage}"
MinWidth="16"
VerticalAlignment="Bottom"
HorizontalAlignment="Left"
DockPanel.Dock="Left" />
</DockPanel>
So the question is this: how can I ensure that both (a) the text block wraps in accordance with column width changes, and (b) the closing double-quote symbol is never clipped?
UPDATE
There's one key thing I should have included: the closing double-quote should be flush with the right-hand edge of the TextBlock. It is not acceptable to have the quote image permanently aligned with the right edge of the column.
You could replace the DockPanel with a Grid with 3 columns in a StackPanel:
<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentControl
Content="{StaticResource DoubleQuotesOpenImage}"
VerticalAlignment="Top"
Grid.Column="0" />
<TextBlock
FontSize="13"
TextWrapping="Wrap"
Text="{Binding TextRepresentation}"
Grid.Column="1" />
<ContentControl
Content="{StaticResource DoubleQuotesCloseImage}"
VerticalAlignment="Bottom"
Grid.Column="2" />
</Grid>
The Width="Auto" setting ensures that the first and third column have the width of the contained element, the middle column would get the rest of the total width.
Reverse the order that you are adding items to your DockPanel so that the last item added is your TextBlock. Then remove the LastChildFill property, and set DockPanel.Dock of your closing quote to Right
<StackPanel>
<DockPanel MinWidth="50">
<ContentControl
Content="{StaticResource DoubleQuotesOpenImage}"
VerticalAlignment="Top"
MinWidth="16"
DockPanel.Dock="Left" />
<ContentControl
Content="{StaticResource DoubleQuotesCloseImage}"
MinWidth="16"
VerticalAlignment="Bottom"
HorizontalAlignment="Left"
DockPanel.Dock="Right" />
<TextBlock
FontSize="13"
TextWrapping="Wrap"
Text="{Binding TextRepresentation}"
VerticalAlignment="Center"
DockPanel.Dock="Left" />
</DockPanel>
</StackPanel>
This will make it so the quotes are positioned first, then your Text will take up all remaining space
You could also use a Grid like Clemens' suggested, although I presonally prefer to use a DockPanel because I hate writing column definitions :)
I am going through the process of designing my first Silverlight application based upon the PivotViewer control from Silverlight 4. I am having problems organizing the bar at the top as per my design:
(source: richard-slater.co.uk)
I have found ways of left aligning the Logo and Title, a way of right aligning the buttons with various combinations of panels however there are two major problems with it.
The XAML looks really really ugly, nesting panels seems to work but doesn't seem like good practice.
I can't seem to find a way of handling resizing the window down without either clipping or overlapping.
I have acheived the best results with the following code:
<StackPanel x:Name="LayoutHeader" Margin="4" Height="50" Grid.Column="0" Grid.Row="0" Orientation="Horizontal">
<Image x:Name="LogoImage" Height="50" Width="50" Source="/EVEMonPivot;component/EVEMonLogoBlue.png" Grid.Column="0" Grid.Row="0" />
<TextBlock x:Name="TitleText" Height="50" Text="EVEMon Pivot" FontSize="40" Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" FontWeight="Bold" Padding="10,0,0,0" />
</StackPanel>
<StackPanel x:Name="NavHeader" Margin="4" Height="50" Grid.Column="0" Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Right">
<Button x:Name="StackExButton" Style="{StaticResource NavButton}" Click="StackExButton_Click">EVE Online StackExchange</Button>
<Button x:Name="BugsButton" Style="{StaticResource NavButton}">Bugs & Suggestions</Button>
</StackPanel>
I intend to move some of the properties into styles, however it still feels messy.
The above code can also result in the following in small windows:
(source: richard-slater.co.uk)
Is there a better way?
If you don't like nesting panels, a Grid might be a better option. With your four elements, have a five column grid like this:
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image x:Name="LogoImage"
Height="50"
Width="50"
Source="/EVEMonPivot;component/EVEMonLogoBlue.png"
Grid.Column="0" />
<TextBlock x:Name="TitleText"
Height="50"
Text="EVEMon Pivot"
FontSize="40"
Grid.Column="1"
Grid.Row="0"
VerticalAlignment="Center"
FontWeight="Bold"
Padding="10,0,0,0" />
<Button x:Name="StackExButton"
Grid.Column="4"
Style="{StaticResource NavButton}"
Click="StackExButton_Click">EVE Online StackExchange</Button>
<Button x:Name="BugsButton"
Grid.Column="5"
Style="{StaticResource NavButton}">Bugs & Suggestions</Button>
</Grid>
This sets four columns to Auto-size, so they adjust to the size of your UI elements, and the centre column is Star-sized so it fills the rest of the space between them.
While you can use a star-sized grid column to enforce a collapsible region between the controls, you're still left to account for what happens when there simply isn't enough room (eg. 600 pixels of display in a 400-pixel wide area.) What I think you need is a ScrollViewer, which is a ContentControl that lets you determine when scroll bars appear.
In the markup below I am doing 2 things: First, I am using the Silverlight toolkit's DockPanel to isolate the left and right sections of the display (a very similar thing can be accomplished with a 3-column Grid with Cols 0 and 2 set to "Auto" and Col 1 set to "*", but the specific use of Left and Right in the DockPanel may make the intent more readable.) Second, the whole thing is being wrapped in a ScrollViewer with the HorizontalScrollBarVisibility set to "Auto" - when the contents is too big to fit, put up a scrollbar.
<UserControl xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="SilverlightApplication2.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<toolkit:DockPanel >
<StackPanel toolkit:DockPanel.Dock="Left" Orientation="Horizontal" VerticalAlignment="Top" Height="50" Margin="5">
<TextBlock Text="Some long text" FontSize="30"/>
</StackPanel>
<StackPanel toolkit:DockPanel.Dock="Right" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right" Height="50" Margin="5">
<Button Content="First Button" Margin="5"/>
<Button Content="Second Button" Margin="5"/>
</StackPanel>
</toolkit:DockPanel>
</ScrollViewer>
<TextBlock Grid.Row="1" Text="Body Content (DataGrid, etc.)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
I am trying to get a layout where an icon floats on the right end of a textblock; the textblock grows/shrinks to content. I cannot make this happen without the textblock running outside the grid. For example:
<Grid x:Name="LayoutRoot" Width="500" HorizontalAlignment="Left" ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="textBlock" VerticalAlignment="Top" Height="25" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="0" >
<TextBlock.Text>longer keeps going and going testgrand you going and then t
</TextBlock.Text>
</TextBlock>
<Rectangle Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41" Width="41" Grid.Column="1"/>
</Grid>
Seems like the natural approach and works fine when the text is shorter than the column/grid, except the textbox and column will grow indefinitely and not honor the bounds of the grid.
The inverse, with the icon on the left, works fine with a simpler layout, and the textblock doesn’t grow indefinitely. This is achieved with this markup:
<Grid Grid.Row="1" Width="500" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41" Width="41" Grid.Column="0"/>
<TextBlock x:Name="textBlock2" VerticalAlignment="Top" Height="25" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="1" HorizontalAlignment="Left">
<TextBlock.Text>longer testgrow the textblock and it will just keep growing but it will stop when it gets too </TextBlock.Text>
</TextBlock>
</Grid>
Any help appreciated. If a grid won’t work, is there an alternate layout where I can get the icon floating on the right of the text, and the textblock will trim text when it’s too long?
Also:
No, using * size columns doesn't work because the columns are fixed, and the icon won't float at the end of the text
A DockPanel doesn't work either, or at least I or others I've asked haven't been able to. The best it can do is to have the icon half-cut-off outside the dockpanel's right side.
Can you get what you want by setting MaxWidth on the TextBlock? If you add MaxWidth="460" to your first example:
<Grid x:Name="LayoutRoot" Width="500" HorizontalAlignment="Left" ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBlock MaxWidth="460" x:Name="textBlock" VerticalAlignment="Top" Height="25" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="0" >
<TextBlock.Text>longer keeps going and going testgrand you going and then t</TextBlock.Text>
</TextBlock>
<Rectangle Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41" Width="41" Grid.Column="1"/>
</Grid>
Then the TextBlock will grow horizontally and always have the rectangle immediately on its right. It won't be wider than 460, so the TextBlock plus the Rectangle shouldn't be wider than 500. If you need the Grid to resize dynamically then you can bind TextBlock.MaxWidth to Grid.ActualWidth with a converter that subtracts the width of the Rectangle.
Edit:
Actually, it should be even simpler than that. Use star sizing on the columns, but set MaxWidth instead of Width on the Grid. That way, the grid itself will get smaller when the text is smaller so that the rectangle is always at the edge of the text.
<Grid x:Name="LayoutRoot" MaxWidth="500" HorizontalAlignment="Left" ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="textBlock" VerticalAlignment="Top" Height="25" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="0" >
<TextBlock.Text>longer keeps going and going testgrand you going and then t</TextBlock.Text>
</TextBlock>
<Rectangle Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41" Width="41" Grid.Column="1"/>
</Grid>
Someone internally suggested this answer, which works:
<WrapPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="10" />
</Grid.ColumnDefinitions>
<AccessText TextTrimming="CharacterEllipsis" Grid.Column="0" Margin="0,0,4,0" Text="type more typingon the long hi longer than what if you keep tyingin and get to the end and that's why it changed because you were in the middle" />
<Border Grid.Column="1" Width="10" Height="10" Background="Red" />
</Grid>
</WrapPanel>
The wrappanel seems to provide the necessary magic. I haven't tried Quartermeister's but will save it for future reference!
Our final layout is more complicated and looks like this (it's the header bar for an expander):
<WrapPanel Orientation="Vertical">
<Grid x:Name="HeaderSite" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="19" />
<ColumnDefinition Width="16" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" /> <!-- 7/14: fix from list: wrap the whole thing in a wrappanel. Allows for one * col. -->
<ColumnDefinition Width="19" />
</Grid.ColumnDefinitions>
<ToggleButton x:Name="buttonExpanderToggleButton"
Height="20" VerticalAlignment="Top"
/>
<Image x:Name="imageActivityIcon" Grid.Column="1"
Height="16" Width="16"
HorizontalAlignment="Left" VerticalAlignment="Top"
Margin="0"/>
<AccessText x:Name="textActivityID"
Grid.Column="2"
VerticalAlignment="Top" Margin="5,2,0,0"
TextTrimming="CharacterEllipsis"
FontSize="12" HorizontalAlignment="Left" Text="MA77777"/>
<AccessText x:Name="textActivityHeader"
Grid.Column="3"
VerticalAlignment="Top" Margin="0,2,0,0"
TextTrimming="CharacterEllipsis"
FontSize="12" HorizontalAlignment="Left" Text="Title title title title aand Title title title title a little and if you type more what happens as you keep typing "/>
<AccessText x:Name="textActivityStatus"
FontWeight="Normal"
FontStyle="Italic"
Grid.Column="4"
TextTrimming="CharacterEllipsis"
VerticalAlignment="Top" Margin="0,2,8,0"
FontSize="12" HorizontalAlignment="Left" Text="(On Hold)"/>
<Image x:Name="imageLink"
Stretch="None" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Column="5"/>
</Grid>
</WrapPanel>
This works fine too even with the other auto sized columns. The key seems to be the wrappanel and the one * sized column. If you set them all to auto it doesn't work.
I hope this and Quartermeister's answer helps somebody, because this drove me #$%#$% crazy.
The below code will result in the following output, is that what you are looking for???
longer keeps going and going... [red rectangle]
<Grid Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="longer keeps going and going testgrand you going and then t" TextTrimming="CharacterEllipsis"/>
<Rectangle Grid.Column="1" Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41" Width="41" />
</Grid>
I had a somewhat similar problem; I wanted to show some content with an externally-sized border area but containing two TextBlocks, where the first is auto-sized and the second is fixed-sized, and the second floats left as the first gets smaller but stops at the right edge (so the first block's text is clipped instead of the second becoming invisible).
Distilling the previous answers, it appears that the key bit of magic is simply to use HorizontalAlignment="Left" with the first column set to star-sized.
<Border BorderThickness="1" BorderBrush="Black">
<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Value}" />
<TextBlock Grid.Column="1" Text="⏫" Margin="4,0,0,0" Foreground="Blue" />
</Grid>
</Border>
It appears that the way this works is that (a bit counter-intuitively) the Border stays full width (as set by its parent layout), while the Grid will size to its content -- except that it will not get wider than the containing Border. This keeps the second TextBlock visible.