Formatting AutoCompleteBox DropDown - wpf

This has to be super simple and just missing it. I have an AutoComplete box and it is not filling the entire space of the box;
The yellow box is added to the image not part of the actual program. The border for each row is added to visually see the space each is taking. Here is the XML for DataTemplate;
<Border Height="Auto" BorderBrush="Black" BorderThickness="1" >
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="2"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0">
<TextBlock Text="Description:" Foreground="Gray" Margin="2,0,2,0" />
<TextBlock Text="Item ID:" Foreground="Gray" Margin="2,0,2,0" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="2">
<TextBlock Text="{Binding Descrip}" Margin="2,0,2,0" />
<TextBlock Text="{Binding ItemID}" Margin="2,0,2,0" />
</StackPanel>
</Grid>
</StackPanel>
<StackPanel Grid.Column="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="2"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0">
<TextBlock Text="Department ID:" Foreground="Gray" Margin="2,0,2,0" />
<TextBlock Text="Class ID:" Foreground="Gray" Margin="2,0,2,0" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="2">
<TextBlock Text="{Binding DepartmentID}" Margin="2,0,2,0" />
<TextBlock Text="{Binding ClassID}" Margin="2,0,2,0" />
</StackPanel>
</Grid>
</StackPanel>
<StackPanel Grid.Column="3" HorizontalAlignment="Right">
<TextBlock Margin="2,0,0,2" FontSize="16" FontWeight="Bold" >
<Run Text="$" />
<Run Text="{Binding Price}" />
</TextBlock>
</StackPanel>
</Grid>
</Border>

Thanks to #gomi42 this worked;
<Style x:Key="autoBoxStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>

Related

Bind button command in listboxItem

I want to bind a button command from a listbox item. But my code not work. Can you help me?
My item template definition:
<UserControl.Resources>
<DataTemplate x:Key="MemberList">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Source="{DynamicResource appbar_user}" Height="30" Width="30" VerticalAlignment="Center" HorizontalAlignment="Left"/
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding EMail}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Button Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" Width="25" Height="25" VerticalAlignment="Center" IsDefault="False" Content="X">
</Button>
</Grid>
</DataTemplate>
</UserControl.Resources>
And my listbox declaration:
<ListBox Margin="0,0,10,0" Grid.Column="0" Grid.Row="2" x:Name="_ownersList" ItemsSource="{Binding GroupOwners}" ItemTemplate="{DynamicResource MemberList}" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="Button.Click" Handler="Button_Click"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Thank you for your help.
It worked fine for me
XAML:
<Window.Resources>
<DataTemplate x:Key="MemberList">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Source="{DynamicResource appbar_user}" Height="30" Width="30" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding EMail}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Button Grid.Column="2" Command="{Binding DataContext.CloseButton,RelativeSource={RelativeSource AncestorType=Window, AncestorLevel=1}}" Grid.Row="0" Grid.RowSpan="2" Width="25" Height="25" VerticalAlignment="Center" IsDefault="False" Content="X">
</Button>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid Height="200" Width="200" VerticalAlignment="Center">
<ListBox Margin="0,0,10,0" Grid.Column="0" Grid.Row="2" x:Name="_ownersList" ItemsSource="{Binding GroupOwners}" ItemTemplate="{DynamicResource MemberList}" >
<!--<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="Button.Click" Handler="Button_Click"/>
</Style>
</ListBox.ItemContainerStyle>-->
</ListBox>
</Grid>
ViewModel
private ICommand closeButton;
public ICommand CloseButton
{
get
{
if (this.closeButton == null)
{
this.closeButton = new RelayCommand<object>(this.ExecuteCloseButton);
}
return this.closeButton;
}
}
private void ExecuteCloseButton(object err)
{
}

Gridsplitter does not allow user to resize grid

My code is as follows:
<Grid
ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="5"
Background="Purple"
HorizontalAlignment="left" />
<ListBox
Grid.Row="0"
Grid.Column="0"
ItemsSource="{Binding Tests}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
Grid.IsSharedSizeScope="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="10*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock
Text="{Binding Name}"
Grid.Column="0">
</TextBlock>
<Image
Grid.Column="1">
</Image>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock
Grid.Row="0"
Grid.Column="1"
Text="{Binding CommandPromptOutput}">
</TextBlock>
<Button
Grid.Row="1"
Grid.Column="2"
Content="Run" VerticalAlignment="Bottom" HorizontalContentAlignment="Center" HorizontalAlignment="Stretch" />
</Grid>
The grid splitter is showing up but it has no control over resizing anything.
I have also tried adding:
<GridSplitter
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="5"
Background="Purple"
HorizontalAlignment="left"
ResizeDirection="Columns"
ResizeBehavior="PreviousAndNext" />

Align Grid column to right

I have a Windows Phone / XAML Grid composed by 3 columns. In particular, I want the third column to be aligned to the very right side of the screen.
<Grid Background="Transparent" Margin="0,3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" x:Name="Marker" Width="60" Height="60" VerticalAlignment="Center" Stretch="Uniform" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="1" x:Name="Name" TextAlignment="Left" VerticalAlignment="Center" Margin="20,0" />
<Image Grid.Column="2" x:Name="Selected" Width="48" Height="48" VerticalAlignment="Center" Stretch="Uniform" HorizontalAlignment="Center"/>
</Grid>
The result, instead, is this:
When it should be like this:
As you mentioned its an ItemTemplate of ListBox, what you can do is set HorizontalContentAlignment to Stretch.
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Try with this :
<Grid Background="Transparent" Margin="0,3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<Image x:Name="Selected" Width="48" Height="48" VerticalAlignment="Center" Stretch="Uniform" HorizontalAlignment="Center"/>
<TextBlock x:Name="Name" TextAlignment="Left" VerticalAlignment="Center" Margin="20,0" />
</StackPanel>
<Image Grid.Column="1" x:Name="Selected" Width="48" Height="48" VerticalAlignment="Center" Stretch="Uniform" HorizontalAlignment="Right"/>
</Grid>
Try HorizontalAlignment="Stretch" in Grid.
I had same problem and it was fixed after removing the stackpanel

RibbonGroup Header on Top

I am trying to figure out how to implement the "Better" example of what is shown here:
Specifically what is used for "Indent" and "Spacing" headings. I assume its just a RibbonGroup header with the header on top but I can't figure out how to do that. Ideas?
It's just a TextBlock.
That appears to be directly from the WPF Source and Samples.
You'll find the following in UserControlWord.xaml which I think is the exact code that produces the entire Paragraph RibbonGroup in your Better: example. For non generic RibbonButtons and such... they usually just make their own grid of normal controls in the examples.
<ribbon:RibbonGroup Header="Paragraph" KeyTip="ZG">
<ribbon:RibbonGroup.Resources>
<!-- Vertical Separator-->
<Style TargetType="{x:Type ribbon:RibbonSeparator}" x:Key="RibbonSeparatorStyleKey">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
</Style>
<!-- Image -->
<Style TargetType="{x:Type Image}" x:Key="ImageStyle16Key">
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Margin" Value="1"/>
<Setter Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor"/>
</Style>
</ribbon:RibbonGroup.Resources>
<ribbon:RibbonGroup.GroupSizeDefinitions>
<ribbon:RibbonGroupTemplateSizeDefinition>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!-- Indent -->
<TextBlock Grid.Row="0" Grid.Column="0" Text="Indent" HorizontalAlignment="Left"/>
<Grid Grid.Row="1" Grid.Column="0" Name="LeftIndentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="35"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\DecreaseIndent_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<TextBlock Grid.Column="1" Text="Left:" HorizontalAlignment="Left" TextAlignment="Left" Margin="3,0,0,0"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="IL"/>
</Grid>
<Grid Grid.Row="2" Grid.Column="0" Name="RightIndentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="35"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\IncreaseIndent_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<TextBlock Grid.Column="1" Text="Right:" HorizontalAlignment="Left" TextAlignment="Left" Margin="3,0,0,0"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="IR"/>
</Grid>
<!-- Separator -->
<ribbon:RibbonSeparator Grid.RowSpan="3" Grid.Column="1" Margin="1,5,5,0" Style="{StaticResource RibbonSeparatorStyleKey}"/>
<!-- Spacing -->
<TextBlock Grid.Row="0" Grid.Column="2" Text="Spacing" HorizontalAlignment="Left"/>
<Grid Grid.Row="1" Grid.Column="2" Name="BeforeSpacingGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="40"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\LineSpacing_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<TextBlock Grid.Column="1" Text="Before:" TextAlignment="Left" HorizontalAlignment="Left" Margin="3,0,0,0"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="SB"/>
</Grid>
<Grid Grid.Row="2" Grid.Column="2" Name="AfterSpacingGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="40"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\LineSpacing_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<TextBlock Grid.Column="1" Text="After:" TextAlignment="Left" HorizontalAlignment="Left" Margin="3,0,0,0"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="SA"/>
</Grid>
</Grid>
</DataTemplate>
</ribbon:RibbonGroupTemplateSizeDefinition>
<ribbon:RibbonGroupTemplateSizeDefinition>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!-- Indent -->
<TextBlock Grid.Row="0" Grid.Column="0" Text="Indent" HorizontalAlignment="Left"/>
<Grid Grid.Row="1" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\DecreaseIndent_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="IL"/>
</Grid>
<Grid Grid.Row="2" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\IncreaseIndent_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="IR"/>
</Grid>
<!-- Separator-->
<ribbon:RibbonSeparator Grid.RowSpan="3" Grid.Column="1" Margin="1,5,5,0" Style="{StaticResource RibbonSeparatorStyleKey}"/>
<!-- Spacing-->
<TextBlock Grid.Row="0" Grid.Column="2" Text="Spacing" HorizontalAlignment="Left"/>
<Grid Grid.Row="1" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\LineSpacing_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="SB"/>
</Grid>
<Grid Grid.Row="2" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\LineSpacing_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="SA"/>
</Grid>
</Grid>
</DataTemplate>
</ribbon:RibbonGroupTemplateSizeDefinition>
<ribbon:RibbonGroupTemplateSizeDefinition IsCollapsed="True"/>
</ribbon:RibbonGroup.GroupSizeDefinitions>
</ribbon:RibbonGroup>

WPF Alignment problems

I have this window:
My problem is that when the number is larger than 2 digits, it pushes the red rectangle to
the right. and I would like it to act like that:
The rectangle must not been pushed to the right.
This is my XAML:
<StackPanel>
<Border BorderThickness="1" BorderBrush="Beige">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<TextBlock Text="1" VerticalAlignment="Top" />
<Rectangle Width="20" Height="20" Fill="Red" VerticalAlignment="Top" />
</StackPanel>
</Grid>
</Border>
<Border BorderThickness="1" BorderBrush="Beige">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="1" >
<TextBlock Text="1123" VerticalAlignment="Top" />
<Rectangle Width="20" Height="20" Fill="Red" VerticalAlignment="Top" />
</StackPanel>
</Grid>
</Border>
</StackPanel>
<StackPanel>
<Border BorderThickness="1" BorderBrush="Beige">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="1" VerticalAlignment="Top" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Right"/>
<Rectangle Width="20" Height="20" Fill="Red" Grid.Column="1" Grid.Row="0"/>
<TextBlock Text="1123" VerticalAlignment="Top" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Right"/>
<Rectangle Width="20" Height="20" Fill="Red" Grid.Column="1" Grid.Row="1"/>
</Grid>
</Border>
</StackPanel>

Resources