Continuous (Edge-to-Edge) Rectangles in WPF overlaps each other - wpf

I am using WPF component in my project in which there is a feature of creating rectangles with the input given as a list containing <x,y> for aligning rectangle over a canvas. I have given 0.5 stroke thickness to the rectangle but not any margin or border between the plotting but still these rectangles are not aligning smoothly , you can see the image attached.
enter image description here
Code
<ItemsControl ItemsSource="{Binding RectangleData}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Height="{Binding ActualHeight, ElementName=8}"
Width="{Binding ActualWidth, ElementName=myPlotRect}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Style>
<Style>
<Setter Property="Canvas.Right" Value="0"/>
<Setter Property="Canvas.Bottom" Value="0"/>
</Style>
</ItemsControl.Style>
<ItemsControl.ItemContainerStyle >
<Style>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="plotLineViewModel:RectangleDataType">
<Canvas Height="{Binding ActualHeight, ElementName=PlotArea}">
<Rectangle Fill= "Blue"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Opacity=".6" Stroke="Grey" StrokeThickness="0.5"
Height ="{Binding Path=ActualHeight, ElementName=RectangleData}">
<Canvas.Left>
<MultiBinding Converter="{StaticResource ChartViewXCordinateConverter}" >
<Binding Path="ActualWidth" ElementName="RectangleData" />
<Binding Path="Location.X" />
<Binding Path="DataContext.XAxisMax" ElementName="XPosition"/>
<Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
</MultiBinding>
</Canvas.Left>
<Rectangle.Width>
<MultiBinding Converter="{StaticResource ChartViewXCordinateConverter}" >
<Binding Path="ActualWidth" ElementName="RectangleData" />
<Binding Path="Width" />
<Binding Path="DataContext.XAxisMax" ElementName="XPosition" />
<Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
</MultiBinding>
</Rectangle.Width>
</Rectangle>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
Here below i am trying stackpanel approach but the gaps are not coming properly?
enter image description here
enter image description here
Below is the code with StackPanel:
<ItemsControl.ItemTemplate>
<DataTemplate DataType="plotLineViewModel:HighLightRectType">
<StackPanel Orientation="Horizontal" Height="{Binding ActualHeight, ElementName=PlotArea}">
<!--<TextBlock Name="TextBlock1" TextAlignment="Center" Style="{StaticResource AxisValueStyle}" Text="{Binding Path=Label}" >
<Canvas.Left>
<MultiBinding Converter="{StaticResource HighlightRectTextPositionCalculator}" >
<Binding Path="Label" />
<Binding Path="Width" />
<Binding Path="Location.X" />
<Binding Path="ActualWidth" ElementName="myPlotRectangle" />
<Binding Path="DataContext.XAxisMax" ElementName="XPosition"/>
<Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
</MultiBinding>
</Canvas.Left>
<Canvas.Top>-30</Canvas.Top>
</TextBlock>-->
<StackPanel.Margin>
<MultiBinding Converter="{StaticResource ChartViewXCordinateConverter}" >
<Binding Path="ActualWidth" ElementName="myPlotRectangle" />
<Binding Path="Location.X" />
<Binding Path="DataContext.XAxisMax" ElementName="XPosition"/>
<Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type ItemsControl}}" Path="DataContext.IsScalingRequired" />
</MultiBinding>
</StackPanel.Margin>
<Rectangle Fill= "{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ItemsControl}}, Path=DataContext.FrameOverlayColor}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Opacity=".6"
Height ="{Binding Path=ActualHeight, ElementName=myPlotRectangle}">
<!--<Canvas.Left>
<MultiBinding Converter="{StaticResource ChartViewXCordinateConverter}" >
<Binding Path="ActualWidth" ElementName="myPlotRectangle" />
<Binding Path="Location.X" />
<Binding Path="DataContext.XAxisMax" ElementName="XPosition"/>
<Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
</MultiBinding>
</Canvas.Left>-->
<Rectangle.Width>
<MultiBinding Converter="{StaticResource ChartViewXCordinateConverter}" >
<Binding Path="ActualWidth" ElementName="myPlotRectangle" />
<Binding Path="Width" />
<Binding Path="DataContext.XAxisMax" ElementName="XPosition" />
<Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
</MultiBinding>
</Rectangle.Width>
</Rectangle>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>

Related

In WPF if we create multiple rectangles using item-container , then rectangles are getting overlapped on each other

In WPF if we create multiple rectangles using item-container , then rectangles are getting overlapped on each other with inconsistent gaps?
Here you can see from 0-100 rectangle should be separated consistently but that didn't happened and then from 120-200 you can observe overlapping and shades.
**Note: All the values coming from converters are perfectly fine. So converters are not the issue.
I tried different ways like using SnapDeviceToPixels and RenderTransform too but it didn't worked
`
<ItemsControl ItemsSource="{Binding HighLightRegions}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Height="{Binding ActualHeight, ElementName=myRectangle}"
Width="{Binding ActualWidth, ElementName=myRectangle}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Style>
<Style>
<Setter Property="Canvas.Right" Value="0"/>
<Setter Property="Canvas.Bottom" Value="0"/>
</Style>
</ItemsControl.Style>
<ItemsControl.ItemContainerStyle >
<Style>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="plotLineViewModel:HighLightRectType">
<Canvas Height="{Binding ActualHeight, ElementName=PlotArea}">
<Rectangle Fill= "{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ItemsControl}}, Path=DataContext.FrameOverlayColor}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Opacity=".6" Stroke="{StaticResource MyChartPlotBackgroundBrush}"
Height ="{Binding Path=ActualHeight, ElementName=myRectangle}">
<Canvas.Left>
<MultiBinding Converter="{StaticResource ChartViewXCordinateConverter}" >
<Binding Path="ActualWidth" ElementName="myRectangle" />
<Binding Path="Location.X" />
<Binding Path="DataContext.XAxisMax" ElementName="XPosition"/>
<Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
</MultiBinding>
</Canvas.Left>
<Rectangle.Width>
<MultiBinding Converter="{StaticResource ChartViewXCordinateConverter}" >
<Binding Path="ActualWidth" ElementName="myRectangle" />
<Binding Path="Width" />
<Binding Path="DataContext.XAxisMax" ElementName="XPosition" />
<Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
</MultiBinding>
</Rectangle.Width>
</Rectangle>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
`

Error XDG0062 'System.Windows.Media.RectangleGeometry' is not a valid value for property 'Children'

I have strange error in the Visual Studio at line with <ControlTemplate TargetType="ItemsControl">
Error XDG0062 'System.Windows.Media.RectangleGeometry' is not a valid value for property 'Children'.
I suspect that I don't see a control preview due to this error.
At runtime, everything looks OK. Should I worry about it, or ignore it? Maybe I should do something different?
<ItemsControl>
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Canvas x:Name="m_Canvas">
<Canvas.Resources>
<RectangleGeometry x:Key="RectangleGeometry1">
<RectangleGeometry.Rect>
<MultiBinding Converter="{StaticResource MyRectConverter}">
<Binding Path="ActualWidth" ElementName="m_Canvas" />
<Binding Path="ActualHeight" ElementName="m_Canvas" />
</MultiBinding>
</RectangleGeometry.Rect>
</RectangleGeometry>
<RectangleGeometry x:Key="RectangleGeometry2">
<RectangleGeometry.Rect>
<MultiBinding Converter="{StaticResource MyRectConverter}">
<Binding Path="ActualWidth" ElementName="m_Canvas" />
<Binding Path="ActualHeight" ElementName="m_Canvas" />
</MultiBinding>
</RectangleGeometry.Rect>
</RectangleGeometry>
</Canvas.Resources>
<Path Fill="#35A500"
Opacity="0.15">
<Path.Data>
<GeometryGroup FillRule="EvenOdd">
<StaticResource ResourceKey="RectangleGeometry1" />
<StaticResource ResourceKey="RectangleGeometry2" />
</GeometryGroup>
</Path.Data>
</Path>
</Canvas>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>

Multibinding WPF

I am arranging few textblocks in a canvas based on it's locations. sample code snippet is provided below at bottom. For this process I need to access each textblock's Actualwidth and Actual Height inside ItemContainerStyle. I am struggling to access it's properties as below by element name, because it doesn't have a name. How to do it? Do I need to do through templates?
<MultiBinding Converter="{StaticResource BPositionConverter}" ConverterParameter="Left">
<Binding ElementName="TextBlock" Path="ActualHeight" /> <---Problem
<Binding ElementName="TextBlock" Path="ActualWidth" /> <---Problem
</MultiBinding>
--Full snippet
<ItemsControl ItemsSource="{Binding Locations}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="Point">
<TextBlock Text="{Binding}" Width="40" Height="20" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left">
<Setter.Value>
<MultiBinding Converter="{StaticResource BPositionConverter}" ConverterParameter="Left">
<Binding ElementName="TextBlock" Path="ActualHeight" /> <---Problem
<Binding ElementName="TextBlock" Path="ActualWidth" /> <---Problem
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
Since your data template consist of a single text element you can refer to self to get the actual width and height for the same
so remove the ElementName and apply RelativeSource, should work with this trick
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left">
<Setter.Value>
<MultiBinding Converter="{StaticResource BPositionConverter}"
ConverterParameter="Left">
<Binding Path="ActualHeight"
RelativeSource="{RelativeSource Self}" />
<Binding Path="ActualWidth"
RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</Setter.Value>
</Setter>
</Style>

Using XAML resource to reduce repetition

I have a scenario where I'm passing in the same values to a multivalue converter for different buttons within a data template which all works fine. But was wondering way to make the code better by removing the repeatable elements, since I'm passing in the same content into
<telerik:RadButton.Visibility>
<MultiBinding Converter="{StaticResource multiValueToBooleanConverter}" ConverterParameter="ViewCommentsDialog">
<Binding Path="DataContext.CanEdit" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="DataContext.CanView" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="Comment"/>
<Binding Path="ExecutionId"/>
</MultiBinding>
</telerik:RadButton.Visibility>
Code:
<DataTemplate>
<StackPanel Orientation="Horizontal">
<telerik:RadButton Margin="2" Command="{Binding DataContext.ViewCommentCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}">
<telerik:RadButton.Visibility>
<MultiBinding Converter="{StaticResource multiValueToBooleanConverter}" ConverterParameter="ViewCommentsDialog">
<Binding Path="DataContext.CanEdit" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="DataContext.CanView" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="Comment"/>
<Binding Path="ExecutionId"/>
</MultiBinding>
</telerik:RadButton.Visibility>
<telerik:RadButton.Content>
<Image Width="20" Height="20" Source="pack://application:,,,/Mizuho.Minar.UI.Common;component/png/Comments.png" />
</telerik:RadButton.Content>
</telerik:RadButton>
<telerik:RadButton Margin="2" Command="{Binding DataContext.AddCommentCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}">
<telerik:RadButton.Visibility>
<MultiBinding Converter="{StaticResource multiValueToBooleanConverter}" ConverterParameter="AddCommentDialog">
<Binding Path="DataContext.CanEdit" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="DataContext.CanView" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="Comment"/>
<Binding Path="ExecutionId"/>
</MultiBinding>
</telerik:RadButton.Visibility>
<telerik:RadButton.Content>
<Image Width="20" Height="20" Source="pack://application:,,,/Mizuho.Minar.UI.Common;component/png/Comment-Add.png" />
</telerik:RadButton.Content>
</telerik:RadButton>
<telerik:RadButton Margin="2" Command="{Binding DataContext.ViewBreaksCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}">
<telerik:RadButton.Visibility>
<MultiBinding Converter="{StaticResource multiValueToBooleanConverter}" ConverterParameter="ViewBreaksDialog">
<Binding Path="DataContext.CanEdit" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="DataContext.CanView" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="Comment"/>
<Binding Path="ExecutionId"/>
</MultiBinding>
</telerik:RadButton.Visibility>
<telerik:RadButton.Content>
<Image Width="20" Height="20" Source="pack://application:,,,/Mizuho.Minar.UI.Common;component/png/Folder-Bug.png" />
</telerik:RadButton.Content>
</telerik:RadButton>
</StackPanel>
</DataTemplate>
Basically there are two quite simple approaches to this.
Option 1 - bind to other property.
You can set your binding (multibinding actually) on some other dependency property, and then bind your buttons visibility to that property. If you don't have any good candidate for such property, you can use some simple object with single dependency property placed in the Resources collection. Here is the code of the class for such object:
public class VisibilityValueHolder : ValueHolder<Visibility> { }
public abstract class ValueHolder<T> : DependencyObject
{
public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
"Value", typeof(T), typeof(ValueHolder<T>), null);
public T Value
{
get { return (T)GetValue(ValueProperty); }
set { SetValue(ValueProperty, value); }
}
public ValueHolder() { }
public ValueHolder(T value)
{
Value = value;
}
}
And the usage in your code:
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<common:VisibilityValueHolder x:Key="VisibilityHolder">
<common:VisibilityValueHolder.Value>
<MultiBinding Converter="{StaticResource multiValueToBooleanConverter}" ConverterParameter="ViewCommentsDialog">
<Binding Path="DataContext.CanEdit" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="DataContext.CanView" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="Comment"/>
<Binding Path="ExecutionId"/>
</MultiBinding>
</common:VisibilityValueHolder.Value>
</common:VisibilityValueHolder.Value>
</StackPanel.Resources>
<telerik:RadButton Margin="2" Command="{Binding DataContext.ViewCommentCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}"
Visibility={Binding Value, Source={StaticResource VisibilityHolder}}>
<telerik:RadButton.Content>
<Image Width="20" Height="20" Source="pack://application:,,,/Mizuho.Minar.UI.Common;component/png/Comments.png" />
</telerik:RadButton.Content>
</telerik:RadButton>
Option 2 - use Style with binding in the Setter
You can either declare implicit or explicit style (in case when you want to apply the same visibility to all your buttons, or just to the selected ones).
Your code would look like this:
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="telerik:RadButton">
<Setter Property="Visibility">
<Setter.Value>
<MultiBinding Converter="{StaticResource multiValueToBooleanConverter}" ConverterParameter="ViewCommentsDialog">
<Binding Path="DataContext.CanEdit" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="DataContext.CanView" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}" />
<Binding Path="Comment"/>
<Binding Path="ExecutionId"/>
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<telerik:RadButton Margin="2" Command="{Binding DataContext.ViewCommentCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}">
<telerik:RadButton.Content>
<Image Width="20" Height="20" Source="pack://application:,,,/Mizuho.Minar.UI.Common;component/png/Comments.png" />
</telerik:RadButton.Content>
</telerik:RadButton>

How to limit width of button to collspan?

I have a ItemControls with a Grid for Template where I place items (button) with a colspan (i'm implementing a calendar). when the text into button is to large, the button width exceed the colspan. the's a way to hide exceeded text?
EDIT
the xaml :
<ItemsControl Grid.Column="1" ItemsSource="{Binding Prenotazioni}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.Style>
<Style>
<Setter Property="Grid.Background">
<Setter.Value>
<MultiBinding Converter="{StaticResource GridColumnsDefinitionsSetter}">
<Binding RelativeSource="{RelativeSource Self}" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}" Path="Periodo" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}" Path="StartDate" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}" Path="EndDate" />
<Binding Path="." />
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</Grid.Style>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button
Command="{x:Static local:Timeline.SelectCommand}"
CommandTarget="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}}"
CommandParameter="{Binding .}">
<Button.ToolTip>
<local:SchedaServizioPrenotato />
</Button.ToolTip>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="LightYellow"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Prenotazione.Annullata}" Value="True">
<Setter Property="Background" Value="LightSalmon"/>
<Setter Property="Opacity" Value="0.4"/>
</DataTrigger>
<DataTrigger Binding="{Binding Prenotazione.Confermata}" Value="True">
<Setter Property="Background" Value="LightBlue"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
<TextBlock Text="{Binding Prenotazione.Nominativo}" TextTrimming="WordEllipsis"/>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Column">
<Setter.Value>
<MultiBinding Converter="{StaticResource ItemColumnSetter}">
<Binding RelativeSource="{RelativeSource Self}" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}" Path="Periodo" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}" Path="StartDate" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}" Path="EndDate" />
<Binding Path="Periodo.Inizio" />
<Binding Path="Periodo.Fine" />
</MultiBinding>
</Setter.Value>
</Setter>
<Setter Property="Grid.Row">
<Setter.Value>
<MultiBinding Converter="{StaticResource ItemRowSetter}">
<Binding RelativeSource="{RelativeSource Self}" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}" Path="Periodo" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}" Path="StartDate" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}" Path="EndDate" />
<Binding Path="." />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ItemsControl}" Path="DataContext" />
</MultiBinding>
</Setter.Value>
</Setter>
<Setter Property="Grid.ColumnSpan">
<Setter.Value>
<MultiBinding Converter="{StaticResource ItemColumnSpanSetter}">
<Binding RelativeSource="{RelativeSource Self}" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}" Path="Periodo" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}" Path="StartDate" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}" Path="EndDate" />
<Binding Path="." />
<Binding Path="Periodo.Inizio" />
<Binding Path="Periodo.Fine" />
</MultiBinding>
</Setter.Value>
</Setter>
<Setter Property="FrameworkElement.Visibility">
<Setter.Value>
<MultiBinding Converter="{StaticResource ItemVisibilitySetter}">
<Binding RelativeSource="{RelativeSource Self}" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}" Path="Periodo" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}" Path="StartDate" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=local:Timeline}" Path="EndDate" />
<Binding Path="Periodo.Inizio" />
<Binding Path="Periodo.Fine" />
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
EDIT
for clarity, I set the column definition on Grid.Background converter
You can make something like this:
<Button>
<TextBlock Text="Text" TextTrimming="WordEllipsis"/>
</Button>
There is also a property called ClipToBound and TextWrapping, check this out
TextWrapping="Wrap"

Resources