is it possible to wrap content in a StackPanel?
I know that we can make use of a WrapPanel instead.
But for code modifying reasons, I must make use of a StackPanel.
So, is there a way to make the items in a StackPanel wrap after say 5 items...
Thanks!
For me, a simple WrapPanel works just fine:
<WrapPanel Orientation="Horizontal" Width="500" />
Not inside a StackPanel or any other container. And setting Width to a constant value can be superior im some cases, because binding it to ActualWidth can prevent down-sizing (e.g. when parent control is down-sized, WrapPanel is not)
Create nested StackPanels which contain the required number of items.
In the example below, you have two rows, respectively occupied by the <StackPanel Orientation="Horizontal"> elements, which in turn each contain five items that will be displayed horizontally next to each other.
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Item1 />
<Item2 />
<Item3 />
<Item4 />
<Item5 />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Item1 />
<Item2 />
<Item3 />
<Item4 />
<Item5 />
</StackPanel>
</StackPanel>
<StackPanel>
<StackPanel.Style>
<Style TargetType="{x:Type StackPanel}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type StackPanel}">
<WrapPanel/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Style>
</StackPanel>
Depending on your scenario you could use a UniformGrid. A few example can also be found here.
You can define it to wrap after 5 Items like this.
<UniformGrid Columns="5">
<Button />
<Button />
<Button />
</UniformGrid>
Each Item will, however get the exact same width, so not sure if this will work for you.
I don't think you can do it without a wrap panel. Maybe you can try putting a wrapPanel inside the stack panel - set its width to to the Actual width of the stack panel. You can bind it like Width="{Binding ActualWidth, ElementName=StackPanel1}"
But this will be just a hack - i think wrap panel is the best suited for your needs.
I put a stackpanel over the button. It won't affect button background. Then in the VB code I used Chr(12), to indicate a line feed:
Button1.Content = "first line" + Chr(12) + "second line"
You can add more lines using Chr(12).
For me it was the best and easiest solution. Set ItemsPanel property.
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Related
I'm trying to make a Windows Phone page with 2 columns, where the columns fill all of their space to make rectangular buttons similar to the Windows Phone menu. Surprisingly, this is trickier than expected. I have the layout working, and the 2 columns, however, they are small rectangles, not filling their width or height.
I don't want to use any "Width = 250" or whatever. I'm purely interested in a responsive layout solution. My current code is below. I've been here for about 2 days now...
<ListView
Grid.Row="1"
ItemsSource="{Binding Locations}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Margin="12">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="12"
BorderThickness="0">
<Button.Template>
<ControlTemplate>
<StackPanel Background="{ThemeResource PhoneAccentBrush}">
<Image />
<TextBlock
TextAlignment="Center"
Text="{Binding Name}" />
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal"
MaximumRowsOrColumns="2"
HorizontalAlignment="Center"
VerticalChildrenAlignment="Stretch"
HorizontalChildrenAlignment="Stretch" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
Here's a screenshot of what it currently looks like. As you can see, the buttons have a massive margin that is not actually given by me...
http://gyazo.com/3c949bd9a6ac5d08b3e40bd5c9bb0e7b
As you say it looks like you do have two columns in your picture. I'm also seeing from your markup that you have 12 pixels margin on your list and 12 pixels margin on your buttons. That means that you're going to have at least 24 pixels of margin between all your UI elements. Looking at the picture I'm seeing closer to 60 pixels between UI elements. We should break this down further to see where the extra size is coming from.
For debugging purposes can you please add a temporary background color to your ListView and a different background color to your DataTemplate item's StackPanel. Then take a new screenshot and see what elements are consuming all the space. I bet it's the ListViewItem. You might want modify the ItemContainerStyle to remove any built in non-visible UI elements taking up space.
Is it possible to create a style for ToolTip that would place an image next to the Item on which the tool tip resides and then show the tool tip text when the user hovers over the image? Something like this:
Currently I am doing a StackPanel to add the image with the tool tip like so:
<StackPanel Orientation="Horizontal">
<CheckBox Content="Reload Employee Data"
IsChecked="{Binding AdjustmentSettings.ReloadEmployeeData}"
Grid.Row="0"
Grid.Column="0">
</CheckBox>
<Image Source="/DelphiaLibrary;Component/Resources/info.ico"
ToolTip="Check if you want to re-upload ...."/>
</StackPanel>
EDIT
Just to clarify, I am looking for a way to style ToolTip such that if I define ToolTip on any object (i.e., Button, CheckBox, etc.) the info image is shown and the tool tip text is placed on this info image.
I would like to be able to do something like this and still get the same as the stack panel above:
<CheckBox Content="Reload Employee Data"
IsChecked="{Binding AdjustmentSettings.ReloadEmployeeData}"
Grid.Row="0"
Grid.Column="0"
ToolTip="Blah blah blah..."
Style="{StaticResource ToolTipImageStyle}">
</CheckBox>
And be able to apply this ToolTipImageStyle to any control (i.e., Button, CheckBox, TextBox, etc.). If that isn't possible can I style an individual control and just create different styles for different controls (one for buttons, another for TextBlock, etc.)?
This should do it. I couldn't figure out the color so just change that.
Source 1
Source 2
<Image Source="/DelphiaLibrary;Component/Resources/info.ico" Width="25" Height="25">
<Image.ToolTip>
<ToolTip Background="LightBlue">
<TextBlock Width="200" TextWrapping="WrapWithOverflow">
Check if you want to re-upload table foxpro.hrpersnl from the source. <LineBreak />
Leave unchecked to use existing data that has been previously uplaoded.
</TextBlock>
</ToolTip>
</Image.ToolTip>
</Image>
Update 1:
Source 1
In the App.xaml add this:
<Application.Resources>
<Style TargetType="{x:Type ToolTip}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}" >
<TextBox Background="LightBlue" Width="200" TextWrapping="WrapWithOverflow" Text="{TemplateBinding ToolTip.Content}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
Then in your XAML file change to:
Note: This will work with all object's tool tips.
<Image Source="Images/MenuImageZoomOut.png" Width="25" Height="25"
ToolTip="Check if you want to re-upload table foxpro.hrpersnl from the source. Leave unchecked to use existing data that has been previously uplaoded." />
The image:
If this doesn't work, try this: Source
I'm trying to databind a Dockpanel in wpf to a viewmodel collection. I'm using this in order to create a customizable form and so I will not know how many children should be in the dockpanel until runtime.
The problem that I am having is that the attached property DockStyle.Dock doesn't seem to be getting applied when I set it from within a data template. The following xaml is a simplified version of what I am doing. I would expect the first button to fill up the top portion of the screen but what really happens is that they are stacked horizontally. Even hardcoding the DockPanel.Dock property has no effect on the layout of the buttons. When I look at the Visual Tree in XAMLPad I notice that there are ContentPresenters as children of the DockPanel instead of the buttons. Do ContentPresenters get layed out differently then other elements? Is there another technique to databinding to DockPanels?
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Grid>
<ItemsControl >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel LastChildFill="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button DockPanel.Dock="{Binding}" Content="{Binding}"></Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
<sys:String>Top</sys:String>
<sys:String>Bottom</sys:String>
<sys:String>Left</sys:String>
<sys:String>Right</sys:String>
<sys:String>Top</sys:String>
<sys:String>Top</sys:String>
<sys:String>Top</sys:String>
</ItemsControl>
</Grid></Page>
The reason that the items aren't docked is because the control in the DataTemplate is not a direct child of the DockPanel. I believe that the ItemsControl creates one ContentPresenter for each item, just like how a ListBox creates one ListBoxItem for each item.
You could try using the ItemContainerStyle to dock the controls. I think that any properties set on it should be set on the ContentPresenter. Something like this might work:
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="DockPanel.Dock" Value="{Binding}" />
</Style>
</ItemsControl.ItemContainerStyle>
...
</ItemsControl>
I'm not sure if binding a string to the Dock property will work or not, though. You might try using the values in the enum directly to see if that helps as well.
This is because your Button is wrapped by ItemsControl in ContentPresenter which does not have DockPanel.Dock set. Try setting ItemContainerStyle to something like this:
<ItemsControl.ItemContainerStyle>
<Style TargetType="{x:Type ContentPresenter}">
<Setter Property="DockPanel.Dock" Value="{Binding}"/>
</Style>
</ItemsControl.ItemContainerStyle>
In WPF there are many ways to achieve the same thing. In this example which is better?
<ItemsControl>
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
or
<ScrollViewer>
<ItemsControl />
</ScrollViewer>
Until you actually -need- to template, don't use templating. =)
That said, my highly personal rule of thumb is that if I'm repeating the same work more than two times (i.e., three and up) I probably need to template or implement some other lovely DRY principle.
This would be a better solution
<ItemsControl>
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer CanContentScroll="True">
<StackPanel IsItemsHost="True" />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
This is because unlike ItemsControl or ItemsPresenter, StackPanel supports the IScrollInfo interface, and therefore you could exert a lot more control over how your items are scrolled.
http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.iscrollinfo.aspx
I am looking to create a task profiler in WPF with an UI similar to the one of incredibuild.
Eg, timed tasks appear as strips on their respective line. Have a look at:
http://baoz.net/wp-content/2009/06/ib1.png
to see what I mean. I am unsure what the best way to tackle this problem is? Should I override the Panel class creating a custom layout panel for this or might there be an existing control/library out there that can fit my needs. I have so far had a look at various charting controls but am unsure of weither they can be tweaked to achieve this behaviour or not. I am really hoping for someone who has been using WPF for a while to help me narrow down my search. It is not exactly easy to know what to google for either :)
In WPF this kind of chart is absolutely trivial. No special charting package is required:
In your resources, define a DataTemplate for displaying the event whose width is bound to the event length:
<DataTemplate TargetType="{x:Type local:Event}">
<Border Width="{Binding EventLength}"> <!-- This sets the width -->
<Border Margin="1" Padding="1" StrokeThickness="1" Stroke="Black"
Background="{Binding EventColor}"> <!-- Actual border -->
<TextBlock Text="{Binding EventDescription}" />
</Border>
</Border>
</DataTemplate>
Also define a horizontal items panel template:
<ItemsPanelTemplate x:Key="HorizontalPanel"><DockPanel/></ItemsPanelTemplate>
Now your actual chart is trivial to build:
<ItemsControl ItemsSource="{Binding CPUs}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock Width="100" Text="{Binding Name}" /> <!-- CPU name -->
<Rectangle Width="1" Fill="Black" /> <!-- Vertical divider -->
<ItemsControl ItemsSource="{Binding Events}" <!-- Events -->
ItemsPanel="{StaticResource HorizontalPanel}" />
</DockPanel>
</DataTemplate>
</ItemsControl.Template>
</ItemsControl>
If you have gaps between your events, simply add a "Gap" object to your Events collection to represent them, then add a DataTemplate for gaps:
<DataTemplate TargetType="{x:Type local:Gap}">
<UIElement Width="{Binding GapWidth}" />
</DataTemplate>