Develop Reference

How to make a border around a stackpanel which stops at the last element inside it?

Currently I have a stackpanel with 2 buttons which I have placed in a single row whithin my grid. I want to draw a border around the stackpanel, but the stackpanel is filling the whole row, it doesnt stop at the last button (as expected I suppose):
Image of border around stackpanel
How can I modify this so the stackpanel or border stops at the last element without hardcoding or dynamically calculating a bottom margin?
<Border Background="#FF303841"
Margin="5"
CornerRadius="3"
Grid.Row="2"
Grid.Column="4">
<StackPanel>
<TextBlock Text="OTHER"
Foreground="White"
FontWeight="Medium"
FontFamily="Poppins"
FontSize="16"
HorizontalAlignment="Left"
Margin="5,5,0,0"/>
<Button Style="{StaticResource linkBtn}">TEST1</Button>
<Button Style="{StaticResource linkBtn}">TEST2</Button>
</StackPanel>
</Border>

As per emoacht's comment above, the solution was to simply add VerticalAlignment="Top" to the border. That made it stop filling the parent which was the grid row.
The cause of this behavior is that the default parameter for VerticalAlignment is stretch, so it needs to be overridden.

How do I use ScaleX and RenderTransform on a text block whilst keeping horizontal alignment?

I am trying to create a popup which based on some data the user enters will generate a preview of something which will be printed out.
One of the options is to stretch the text to double its usual width so I have used the ScaleTransform option of the textblock. This works but I am having some issues with the alignment, when I set the Horizontal alignment to Left the stretched text displays with half of the text cut off. Central alignment is mostly ok, the text isn't perfectly central though.
Is there any way I can make this text stretch whilst still maintaining the alignment?
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding CouponLine}"
FontWeight="{Binding FontWeight}"
HorizontalAlignment="{Binding Alignment}"
FontSize="{Binding FontSize}"
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<ScaleTransform ScaleX="{Binding ScaleX}" ScaleY="1" CenterX=".5"/>
</TextBlock.RenderTransform>
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>

Try TextAlignment="Center" instead of HorizontalAlignment

It appears that RenderTransform ignores the boundaries of the element containing it, whereas using LayoutTransform will keep the transformed text within the boundaries of its parent element.
<TextBlock.LayoutTransform>
<ScaleTransform ScaleX="{Binding ScaleX}" ScaleY="1" CenterX=".5"/>
</TextBlock.LayoutTransform>

WPF: Row of ToggleButtons with equal length?

I'm currently displaying RadioButtons in my application as rows of ToggleButtons (see my last question). However, I'd like the buttons to be of the same width - currently, every button is just as wide as it has to be.
Since I'm working with templates, I'd like to avoid specifying the width every time I use the control if possible - instead, the width of every button in the row should be equal to that of the widest button in that group.
Any ideas how to do this in XAML? :-)

Maybe using a UniformGrid and setting int the style the property HorizontalAlignement="Stretch" will help.

If you have access to all the toggle buttons (e.g. they aren't databound) then there is a neat trick you can do by binding the minwidth of each button to the width of the one next to it. With the final button being bound to the first:
<StackPanel Orientation="Horizontal">
<Button x:Name="Button1" Content="Long text" MinWidth="{Binding ElementName=Button2, Path=ActualWidth}"/>
<Button x:Name="Button2" Content="A" MinWidth="{Binding ElementName=Button3, Path=ActualWidth}"/>
<Button x:Name="Button3" Content="Extremely long text that should cause this button to be really wide" MinWidth="{Binding ElementName=Button1, Path=ActualWidth}"/>
</StackPanel>

in your resources section create a style that targets ToggleButtons and sets the width to whatever value you want.
<Window.Resources>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Width" Value="50" />
</Style>
</Window.Resources>

Use a grid with a 1 button in each column and definethe widths like this

Putting ListBox in ScrollViewer: mouse wheel does not work

My mouse wheel does not work when putting a ListBox in a ScrollViewer.
Does the ListBox somehow "steal" this event?
<ScrollViewer VerticalScrollBarVisibility="Auto" Style="{StaticResource myStyle}">
<ListBox>
<ListBoxItem>Test 1</ListBoxItem>
<ListBoxItem>Test 2</ListBoxItem>
<ListBoxItem>Test 3</ListBoxItem>
<ListBoxItem>Test 4</ListBoxItem>
<ListBoxItem>Test 5</ListBoxItem>
<ListBoxItem>Test 6</ListBoxItem>
<ListBoxItem>Test 7</ListBoxItem>
</ListBox>
</ScrollViewer>
Edit: as requested by Joel, added the reason why I did this..
I did this because I don't like what the ListBox's internal ScrollViewer does with my layout. I have a background image, and on top of that a ListBox as shown here:
alt text http://robbertdam.nl/share/1.png
Now when the scrollbar appears, the following happens:
alt text http://robbertdam.nl/share/2.png
I've created a Style for a ScrollViewer that shows the scroll bar on top of the ListBox item's content. In the ListBox item's datatemplate I've reserved some space for the scrollbar to appear.
Thanks,
Robbert Dam

Firstly, I think you need to elaborate on what your limitations are and what you're trying to achieve. Without that, I can only explain why what you're doing isn't working. Somebody may even have a better idea about how to get the result you're after.
If you put ListBox inside a ScrollViewer, then the control template for ListBox still has its own ScrollViewer inside. When the mouse cursor is over the ListBox and you scroll the mousewheel, that event bubbles up until it reaches the ScrollViewer that's part of ListBox. That one handles it by scrolling and marks the event as handled, so then the ScrollViewer you put the ListBox inside of ignores the event.
If you make the ListBox taller and narrower than the outer ScrollViewer, and give it enough items so that the ListBox itself can scroll the items, you'll see 2 vertical scroll bars: 1 in the ListBox, and 1 outside the ListBox for your outer ScrollViewer. When the mouse cursor is inside the ListBox, the ListBox will scroll the items with its internal ScrollViewer, and its Border will stay in place. When the mouse cursor is outside the ListBox and inside the outer ScrollViewer, that ScrollViewer will scroll its contents -- the ListBox -- which you can verify by noting that the ListBox's Border changes position.
If you want an outer ScrollViewer to scroll the entire ListBox control (including the Border and not just the items), you'll need to re-style the ListBox so that it does not have an internal ScrollViewer, but you'll also need to make sure it automatically gets bigger according to its items.
I don't recommend this approach for a couple reasons. It might make sense if there are other controls inside the ScrollViewer along with the ListBox, but your sample does not indicate that. Also, if you're going to have a lot of items in the ListBox, you'll be creating ListBoxItems for every single one, eliminating any advantage that the default, non-re-styled ListBox gives you due to the default VirtualizingStackPanel.
Please let us know what your actual requirements are.
Edit: Ok, now I have a little better idea, with the addition of those images. The effect you're getting is that when there are enough items to scroll and the scrollbar appears, the available area has to shrink a bit horizontally because the ScrollViewer's template uses a Grid. These seem to be your options, in order of lesser-to-better:
Re-style the ListBox to not have a ScrollViewer and use your re-styled ScrollViewer outside the ListBox. You'd then also have to force the ListBox to also be tall enough to show every item in that same Style, and now you've lost UI virtualization. If you're going to be showing hundreds of items in the list, you definitely don't want to lose that.
Re-style the ListBox and set the ControlTemplate to use a ScrollViewer with the style you already created for it that puts the scrollbar over the content rather than in a separate column. This one's ok (ListBox gets to limit its height and use a VirtualizingStackPanel, yay), but as you said, it necessitates awareness of that in your DataTemplate.
Re-style the ScrollViewer to leave space for vertical scrollbar even when it is not visible. Here's what this option looks like:
By default, ScrollViewer uses 2 columns in a Grid equivalent to this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
So the Width of the scrollbar's column is 0 when the scrollbar is not visible since Width="Auto". To leave space for the scrollbar even when it is hidden, we bind the Width of that column to the Width of the vertical scroll bar:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition
Width="{Binding ElementName=PART_VerticalScrollBar, Path=Width}" />
</Grid.ColumnDefinitions>
So now the ControlTemplate in the custom Style for ScrollViewer might look like this:
<ControlTemplate
TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition
Width="{Binding ElementName=PART_VerticalScrollBar, Path=Width}" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<ScrollContentPresenter />
<ScrollBar
Grid.Column="1"
Name="PART_VerticalScrollBar"
Value="{TemplateBinding VerticalOffset}"
Maximum="{TemplateBinding ScrollableHeight}"
ViewportSize="{TemplateBinding ViewportHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
<ScrollBar
Name="PART_HorizontalScrollBar"
Orientation="Horizontal"
Grid.Row="1"
Value="{TemplateBinding HorizontalOffset}"
Maximum="{TemplateBinding ScrollableWidth}"
ViewportSize="{TemplateBinding ViewportWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
</Grid>
</ControlTemplate>
You could even make the content column a fixed size and the scrollbar column Width="*", which might work better in the long run if your image is not stretched. Now the DataTemplate does not have to compenstate for the width of a scrollbar, as it gets a consistent area to use whether the scrollbar is visible or not.
You'll probably want to check out the rest of the example ControlTemplate for ScrollViewer, but those examples are not the default styles. Note that the example puts the vertical scrollbar on the left! Also note the comment at the bottom about ContentScrollPresenter.

I was dealing with the same issue. I set the ListBox.ItemsPanel Property, without any ScrollViewer:
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<ListBox>
<ListBox.Template>
<ControlTemplate TargetType="ItemsControl">
<Border>
<ItemsPresenter />
</Border>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<\ListBox>
<\ScrollViewer>
Hope this helps.

see this link for another answer:Scroll in ScrollViewer when mouse over ListBox
Hello, I think you can handle the whole ListBox’s PreviewMouseWheel event. This will also affect individual items as long as you don’t handle each item’s
PreviewMouseWheel and mark the event as handled:
private void ListBox_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
if (e.Delta < 0)
{
scrollViewer1.LineDown();
}
else
{
scrollViewer1.LineUp();
}
}

If you just want to make work the mouse scrolling and don't need a style for the ScrollViewer:
Remove the outer ScrollViewer.
Use the attached properties of the ScrollViewer, which is inside of the ListBox.
See first two lines of this example:
<ListBox ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBoxItem>Test 1</ListBoxItem>
<ListBoxItem>Test 2</ListBoxItem>
<ListBoxItem>Test 3</ListBoxItem>
<ListBoxItem>Test 4</ListBoxItem>
<ListBoxItem>Test 5</ListBoxItem>
<ListBoxItem>Test 6</ListBoxItem>
<ListBoxItem>Test 7</ListBoxItem>
</ListBox>

Autosizing ComboBox dropdown to content in Silverlight

I have this ComboBox in my Silverlight UserControl:
<ComboBox
AutomationProperties.AutomationId="cmbProjects"
Grid.Row="0"
Grid.Column="2"
ItemsSource="{Binding Projects}"
SelectedItem="{Binding SelectedProject, Mode=TwoWay}"
Style="{StaticResource DefaultComboBoxStyle}"
>
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock Foreground="DarkRed" AutomationProperties.AutomationId="{Binding Number}" Width="100" Margin="0" Text="{Binding Number, Converter={StaticResource StringFormatter},ConverterParameter='\{0\}'}" />
<TextBlock AutomationProperties.AutomationId="{Binding Description}" Text="{Binding Description, Converter={StaticResource StringFormatter},ConverterParameter='\{0\} '}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
The lenghth of most of the items populating the combobox exceeds the width of the control. When I dropdown the list, the dropdown expands, but not fully to the width of the item content, resulting in content that is clipped a horizontal scrollbar. This does not happen with exact same combobox where content is within the original width of the control.
In WPF, I could simply set the width of the item container to auto; in Silverlight this results in a catastrophic error. I can set the with to a huge number, but the scroll still appears, regardless of the width. Also, in Silverlight 2 beta 2 there was a property DropDownWidth, with one of the options being "Auto", which I don't see in RTM.
I can get around this with a bit of trickery, mainly hiding the horizontal scrollbar and appending a bunch of characters so that the dropdown fully expand to show the item content. Obviously, this hack not ideal. Did anyone experience similar problem? Is there something that I'm missing to force the combobox to expand fully without a scrollbar?
ib.

It appears that they fixed it in SL3.
If you want to tweak the PopUp, you can do that from within the ComboBox's Control Template. In Blend follow these steps:
Right Click on ComboBox
Select "Edit Control Parts (Template)"
Select "Edit a Copy"
This will copy the out of the box control style & template so that you can tweak that ScrollViewer inside the ComboBox's PopUp to your heart's content.
You may want to try the solution I describe here. It details how to ensure that the combobox pop-up's height and width are updated when items are added or removed.

You can use MaxDropDownHeight property of ComboBox control.