ListBox content not completely stretching across listbox - wpf

I am trying to make a list box where I have complete control over the look of each item in the list box.
I can make the item horizontally stretch. However, there's this thin sliver of blue to the left of a selected item. (In the picture, the middle item is selected).
Can I make this blue strip go away?
alt text http://img44.imageshack.us/img44/949/boundlistboxdisplay.jpg
Here's the complete code.
<Window x:Class="SimpleListTemplate.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Window.Resources>
<XmlDataProvider x:Key="DcCharacters">
<x:XData>
<Characters xmlns="">
<Character HeroName="Catwoman" Identity="Selina Kyle" />
<Character HeroName="Batman" Identity="Bruce Wayne" />
<Character HeroName="Starman" Identity="Jack Knight" />
</Characters>
</x:XData>
</XmlDataProvider>
</Window.Resources>
<Grid>
<ListBox
ItemsSource="{Binding Source={StaticResource DcCharacters}, XPath=//Characters/*}"
HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Label
Content="{Binding XPath=#HeroName}"
Height="40"
VerticalContentAlignment="Center"
Background="LightGreen"
BorderThickness="2"
BorderBrush="DarkGreen"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>

Here is an update for your code.
<Window x:Class="SimpleListTemplate.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Window.Resources>
<XmlDataProvider x:Key="DcCharacters">
<x:XData>
<Characters xmlns="">
<Character HeroName="Catwoman" Identity="Selina Kyle" />
<Character HeroName="Batman" Identity="Bruce Wayne" />
<Character HeroName="Starman" Identity="Jack Knight" />
</Characters>
</x:XData>
</XmlDataProvider>
<Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
<Setter Property="Padding" Value="0,0,0,0"/>
</Style>
</Window.Resources>
<Grid>
<ListBox
ItemsSource="{Binding Source={StaticResource DcCharacters}, XPath=//Characters/*}"
ItemContainerStyle="{StaticResource ContainerStyle}"
HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Label
Content="{Binding XPath=#HeroName}"
Height="40"
VerticalContentAlignment="Center"
Background="LightGreen"
BorderThickness="2"
BorderBrush="DarkGreen"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
This may solve your problem.

Related

Handle drag shape that be overlap

i 'm doing a program that user could drag this shape.
The shape is:
It could be joined each other for making new block.
But the problem is, when i drag two [Blue] Shape into the [If] Shape, i cant not drag the [Blue] anymore, cause of the [If] Shape is collapsed and make the [Blue] Shape cant not be interact.
Here is my code:
The define of the shape
<UserControl x:Class="SampleCode.ActionShape"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:SampleCode"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d" >
<UserControl.Resources>
<local:ColorToBrushConverter x:Key="colorToBrushConverter"/>
<local:ThicknessConverter x:Key="thicknessConverter"/>
</UserControl.Resources>
<Grid>
<Path Data="{Binding SvgData}"
Fill="{Binding Color, Converter={StaticResource colorToBrushConverter}}"
Cursor="Hand">
</Path>
<TextBlock Foreground="{Binding TextColor, Converter={StaticResource colorToBrushConverter}}" FontSize="{Binding FontSize}" Margin="{Binding MarginText}" Text="{Binding Text}"></TextBlock>
</Grid>
</UserControl>
The mainwindow.xaml
<Window x:Class="SampleCode.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SampleCode"
Title=""
Width="1400"
Height="800"
Loaded="Window_Loaded">
<Window.Resources>
<local:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
<DataTemplate DataType="{x:Type local:BaseShapeMVVm}">
<local:ActionShape AllowDrop="True" MouseDown="Rectangle_MouseDown" MouseMove="Rectangle_MouseMove" MouseUp="Rectangle_MouseUp"></local:ActionShape>
</DataTemplate>
</Window.Resources>
<Window.DataContext>
<local:ViewModel />
</Window.DataContext>
<Grid>
<TreeView Name="ListBox" ItemsSource="{Binding Rectangles}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="TreeViewItem">
<Setter
Property="Canvas.Left" Value="{Binding X}"/>
<Setter
Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
</TreeView>
</Grid>
</Window>
could you give me some recommendation for this problem? i 'm very appoxiated

Resize my user controls content with change in size of window or document panel

I have few buttons on click, they display a user control with images. when i resize any one of them, the images starts hiding. but i want them to expand and shrink with resize. please tell me how to achieve this.
OtherPanelView.xaml
<UserControl x:Class="DXDockingMVVMTest1.Views.OtherPanelView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" Background="Orange">
<Grid>
<Image HorizontalAlignment="Left" Height="23" Margin="96,104,0,0" TextWrapping="Wrap" Source="{Binding Image}" VerticalAlignment="Top" Width="120"/>
</Grid>
</UserControl>
PanelView.xaml
<UserControl x:Class="DXDockingMVVMTest1.Views.PanelView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" Background="#FF47DAB4">
<Grid>
<Image HorizontalAlignment="Left" Height="23" Margin="96,104,0,0" TextWrapping="Wrap" Source="{Binding Image}" VerticalAlignment="Top" Width="120"/>
</Grid>
</UserControl>
MainView.xaml
<Window x:Class="DXDockingMVVMTest1.Views.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:ViewModels="clr-namespace:DXDockingMVVMTest1.ViewModels"
xmlns:Views="clr-namespace:DXDockingMVVMTest1.Views" Title="Main Window" Height="400" Width="800">
<Window.Resources>
<!--<Views:Conv x:Key="conv"/>-->
<DataTemplate DataType="{x:Type ViewModels:PanelViewModel}">
<Views:PanelView />
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModels:OtherPanelViewModel}">
<Views:OtherPanelView/>
</DataTemplate>
<Style TargetType="dxd:DocumentPanel">
<Setter Property="Caption" Value="{Binding Caption}" />
<Setter Property="Views:Helper.Name" Value="{Binding Caption}"/>
<Setter Property="AllowFloat" Value="{Binding CanFloat}"/>
</Style>
</Window.Resources>
<dxb:BarManager>
<dxb:BarManager.Categories>
<dxb:BarManagerCategory Name="File" />
</dxb:BarManager.Categories>
<dxb:BarManager.Items>
<dxb:BarButtonItem Name="bNew" CategoryName="File" Content="Add Panel" KeyGesture="Ctrl+N" Hint="" Command="{Binding AddPanelCommand}"/>
<dxb:BarButtonItem Name="bOpen" CategoryName="File" Content="Add Other Panel" KeyGesture="Ctrl+O" Hint="Open" Command="{Binding AddOtherPanelCommand}"/>
<dxb:BarButtonItem Name="bSave" CategoryName="File" Content="Save" KeyGesture="Ctrl+S" Hint="Save Document" ItemClick="OnSaveLayout" />
<dxb:BarButtonItem Name="bExit" CategoryName="File" Content="Restore" KeyGesture="Ctrl+X" ItemClick="OnRestoreLayout"/>
</dxb:BarManager.Items>
<dxb:BarManager.Bars>
<dxb:Bar Caption="Panel1Bar" x:Name="Bar1" UseWholeRow="True" ShowDragWidget="False" AllowQuickCustomization="False">
<dxb:Bar.DockInfo>
<dxb:BarDockInfo ContainerName="panel1DockControl" />
</dxb:Bar.DockInfo>
<dxb:Bar.ItemLinks>
<dxb:BarButtonItemLink BarItemName="bNew" />
<dxb:BarButtonItemLink BarItemName="bOpen" />
<dxb:BarButtonItemLink BarItemName="bSave" />
<dxb:BarButtonItemLink BarItemName="bExit" />
</dxb:Bar.ItemLinks>
</dxb:Bar>
<dxb:Bar Caption="Panel2Bar" x:Name="Bar2" UseWholeRow="True" ShowDragWidget="False" AllowQuickCustomization="False">
<dxb:Bar.DockInfo>
<dxb:BarDockInfo ContainerName="{x:Null}" />
</dxb:Bar.DockInfo>
<dxb:Bar.ItemLinks>
<dxb:BarButtonItemLink BarItemName="bNew" />
<dxb:BarItemLinkSeparator/>
<dxb:BarButtonItemLink BarItemName="bOpen" />
<dxb:BarItemLinkSeparator/>
<dxb:BarButtonItemLink BarItemName="bSave" />
<dxb:BarItemLinkSeparator/>
<dxb:BarButtonItemLink BarItemName="bExit" />
</dxb:Bar.ItemLinks>
</dxb:Bar>
</dxb:BarManager.Bars>
<DockPanel>
<dxb:BarContainerControl Name="Top_Container" DockPanel.Dock="Top"/>
<dxd:DockLayoutManager Name="dockLayoutManager1" ItemsSource="{Binding WidgetList}" FloatingMode="Desktop"
dx:WorkspaceManager.IsEnabled="True"
dxd:RestoreLayoutOptions.RemoveOldPanels="True"
dxd:RestoreLayoutOptions.AddNewPanels="True"
BeforeItemAdded="dockLayoutManager1_BeforeItemAdded" >
<dxd:LayoutGroup x:Name="group">
<dxd:LayoutPanel Visibility="Collapsed" />
<dxd:DocumentGroup x:Name="PanelHost" DestroyOnClosingChildren="False">
</dxd:DocumentGroup>
</dxd:LayoutGroup>
<!--<dxd:DockLayoutManager.ContextMenuCustomizations>
<dxb:AddBarItemLinkAction>
<dxb:BarItemLinkSeparator />
</dxb:AddBarItemLinkAction>
<dxb:BarButtonItem Name="bAbout" CategoryName="Help" Content="About" />
</dxd:DockLayoutManager.ContextMenuCustomizations>
<dxd:DockLayoutManager.ItemSelectorMenuCustomizations>
<dxb:AddBarItemLinkAction>
<dxb:BarItemLinkSeparator />
</dxb:AddBarItemLinkAction>
<dxb:BarButtonItem Name="bHome" CategoryName="Help" Content="AAA" />
</dxd:DockLayoutManager.ItemSelectorMenuCustomizations>-->
</dxd:DockLayoutManager>
</DockPanel>
</dxb:BarManager>
</Window>
Image cannot resize as its height and width is fixed. Remove Height and width of the image.
<Grid>
<Image HorizontalAlignment="Left" Margin="96,104,0,0" Source="{Binding Image}" VerticalAlignment="Top" />
</Grid>
And also remove TextWrapping="Wrap" from image tag. TextWrapping is not a property of image control
try this code:
<Grid> <Image HorizontalAlignment="Left" Source="{Binding Image}" VerticalAlignment="Top" HorizontalAlignment="Left" /> </Grid>

WPF Databinding ListView with ComboBox Selected Item Issue

I have a databound ComboBox where I cannot seem to set the SelectedItem. I have tried SelectedValue/SelectedValuePath, but have having difficulties.
To explain the scenario, I have a parent ListView which contains ComboBoxes w/in the ListViewItems. The parent ListView and the child ComboBox have the same datasource, but display different data. For example, Extension 2 references Extension 1. In this case I am trying to illustrate that 2 mirrors one. The user needs to be able to change which Extension it points to, itself or any of the others. Other than that it is very simple, but almost have it.
Here the example which you can run from your favorite xaml editor.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<XmlDataProvider x:Key="xmlDataProvider">
<x:XData>
<Extensions xmlns="">
<Extension>
<ExtId>1</ExtId>
<ExtName>Extension 1</ExtName>
<ExtValue>1</ExtValue>
</Extension>
<Extension>
<ExtId>2</ExtId>
<ExtName>Extension 2</ExtName>
<ExtValue>1</ExtValue>
</Extension>
<Extension>
<ExtId>3</ExtId>
<ExtName>Extension 3</ExtName>
<ExtValue>3</ExtValue>
</Extension>
<Extension>
<ExtId>4</ExtId>
<ExtName>Extension 4</ExtName>
<ExtValue>4</ExtValue>
</Extension>
</Extensions>
</x:XData>
</XmlDataProvider>
<!-- Extensions -->
<CollectionViewSource
x:Key="CollectionViewSourceExtensions"
Source="{Binding Source={StaticResource xmlDataProvider}, XPath=Extensions/Extension}" />
</Page.Resources>
<Grid>
<ListView
ItemsSource="{Binding
Source={StaticResource CollectionViewSourceExtensions},
Mode=OneWay}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding XPath=ExtName}" />
<TextBlock Text=" - " />
<TextBlock Text="{Binding XPath=ExtValue}" />
</StackPanel>
<ComboBox
SelectedItem="{Binding XPath=ExtId}"
ItemsSource="{Binding
Source={StaticResource CollectionViewSourceExtensions},
Mode=OneTime}">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding XPath=ExtId}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Page>
Was a simple resolution that took a good deal of time to finally figure out...
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<XmlDataProvider x:Key="SamplePeople">
<x:XData>
<Extensions xmlns="">
<Exension>
<Id>1</Id>
<Name>Line Key 1</Name>
<Value>1</Value>
</Exension>
<Exension>
<Id>2</Id>
<Name>Line Key 2</Name>
<Value>1</Value>
</Exension>
<Exension>
<Id>3</Id>
<Name>Line Key 3</Name>
<Value>3</Value>
</Exension>
<Exension>
<Id>4</Id>
<Name>Line Key 4</Name>
<Value>4</Value>
</Exension>
</Extensions>
</x:XData>
</XmlDataProvider>
</Page.Resources>
<Grid>
<ListBox x:Name="PeopleListBox"
DataContext="{Binding Source={StaticResource SamplePeople}}"
ItemsSource="{Binding Mode=Default, XPath=/Extensions/node()}"
IsSynchronizedWithCurrentItem="True">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding XPath=Name}" />
<TextBlock Text=" is " />
<ComboBox
SelectedValue="{Binding XPath=Value}"
ItemsSource="{Binding Mode=Default, XPath=/Extensions/Exension/Id}" >
</ComboBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Page>

XAML/Blend dependent data binding

I want to create a listbox that'll be bound to XPath, relative to the other listbox's currently selected item.
It's using XmlDataProvider for the data, and the XML file looks like this:
<Programs>
<Program name="...">
<Step name="..."/>
<Step name="..."/>
</Program>
<Program name="another">
...
</Programs
So, the "parent" listbox is listing out all the programs, while "child" shows only steps from the current program.
What's such a type of binding called?
Here you go. Hope this answers your question.
<Window x:Class="StackOverflow.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:StackOverflow"
xmlns:uc="clr-namespace:StackOverflow.UserControls"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<XmlDataProvider x:Key="xml">
<x:XData>
<Programs xmlns="">
<Program name="Program">
<Step name="Step1"/>
<Step name="Step2"/>
</Program>
<Program name="Program2">
<Step name="Step3"/>
<Step name="Step4"/>
</Program>
</Programs>
</x:XData>
</XmlDataProvider>
</Window.Resources>
<Grid>
<StackPanel>
<ListBox x:Name="parent" ItemsSource="{Binding Source={StaticResource xml}, XPath=Programs/Program}"
Height="100">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding XPath=#name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox DataContext="{Binding ElementName=parent, Path=SelectedItem}" ItemsSource="{Binding XPath=Step}"
Height="100">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding XPath=#name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
</Window>

Data-based template selection in WPF

I have this simple XAML example:
<Window x:Class="DynTemplateTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<DataTemplate x:Key="ItemTemplate">
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Width="30" Height="30" Fill="Red"></Rectangle>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding Position}"></Setter>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</DataTemplate>
</Window.Resources>
<DockPanel LastChildFill="True">
<ContentPresenter
Content="{Binding Path=Items}"
ContentTemplate="{StaticResource ItemTemplate}"
>
</ContentPresenter>
</DockPanel>
</Window>
It is rendering my items in the observable collection in MVVM style. Each item is having its horizontal position in a property. Each item also has a property IsSpecial which tells if it wants to be rendered in some special way. I want ordinary items (IsSpecial=false) render as red squares (already in the code) and special items as blue circles with "special" text inside.
What I do not know is how to adjust the XAML code to do the template selection for the items. Is there a way to do that without coding my own ItemTemplateSelector? Will it still work with the canvas positioning based on binding. I think that the solution is to extract the item template to a separate template, create one more template for special items and then somehow play with triggers ... but it is not very easy for me as I am a WPF beginner at the moment.
The other thing is that I quite dislike the way how the Position is passed to the items. Is there some other way?
Are there any other recommendations how to improve the code?
I solved it myself :D
<Window x:Class="DynTemplateTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<DataTemplate x:Key="NormalItem">
<Rectangle Width="30" Height="30" Fill="Red"></Rectangle>
</DataTemplate>
<DataTemplate x:Key="SpecialItem">
<Rectangle Width="30" Height="30" Fill="Red"></Rectangle>
</DataTemplate>
<DataTemplate x:Key="ItemTemplate">
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentControl Content="{Binding}" ContentTemplate="{StaticResource NormalItem}" x:Name="ItemsContentControl" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsSpecial}" Value="true">
<Setter TargetName="ItemsContentControl" Property="ContentTemplate" Value="{StaticResource SpecialItem}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding Position}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</DataTemplate>
</Window.Resources>
<DockPanel LastChildFill="True">
<ContentPresenter
Content="{Binding Path=Items}"
ContentTemplate="{StaticResource ItemTemplate}"
>
</ContentPresenter>
</DockPanel>
</Window>
But still, any thoughts on alternatives or improvements?

Resources