In ItemsControl items are in a ContentPresenter, so if a item has Visibility='collapsed' its ContentPresenter still have Visibility='Visible'...
(Here is explained this behaviour)
So these 2 examples doesn't show the same result:
This works as I expect:
<UniformGrid Columns="1">
<Button Content="0"/>
<Button Content="1"/>
<Button Content="2" Visibility="Collapsed"/>
<Button Content="3"/>
</UniformGrid>
This doesn't work as I expect (UniformGrid reserve the space for the third button also if it is collapsed):
<ItemsControl>
<ItemsControl.ItemsSource>
<x:Array Type="{x:Type System:Int32}">
<System:Int32>0</System:Int32>
<System:Int32>1</System:Int32>
<System:Int32>2</System:Int32>
<System:Int32>3</System:Int32>
</x:Array>
</ItemsControl.ItemsSource>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="1"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Visibility="{Binding ., Converter={StaticResource CalculatorConverter}, ConverterParameter=IIF(\{0\}\=2\,\'Collapsed\'\,\'Visible\')}" Content="{Binding .}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Anyone got this problem? Is there a workaround?
This is expected behaviour, because the button is not a direct child of the UniformGrid. Instead, ItemsControl adds a ContentPresenter templated with the DataTemplate you've defined to the UniformGrid. So basically the visual tree resembles this:1
<UniformGrid>
....
<ContentPresenter>
<Button Visibility="Collapsed" />
</ContentPresenter>
....
</UniformGrid>
I think this clearly demonstrates why the space in the grid is reserved even though the button is collapsed. Of course to remedy that you should collapse the ContentPresenter instead. It can be achieved by using ItemsControl.ItemContainerStyle property:
<ItemsControl>
<ItemsControl.ItemContainerStyle>
<Style TargetType="{x:Type ContentPresenter}">
<Setter Property="Visiblity" Value="{Binding ., Converter=...}" />
</Style>
</ItemsControl.ItemContainerStyle>
...
</ItemsControl>
1 The provided code is only an illustration of the visual tree and is not a valid WPF XAML.
Related
This has come up a few times, and I've been struggling with it all day in a UWP app.
My specific issue was that I was using x:Bind inside a ContentTemplate that was inside a DataTemplate:
<DataTemplate x:DataType="IFactionMember">
<Button Command="{x:Bind **Property of IFactionMember**}"> // Good
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid Padding="10,0">
<TextBlock Text="{x:Bind **Property of IFactionMember**}" /> // Bad
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</DataTemplate>
You cannot do this :(
You could use {Binding} instead for your scenario, for example:
<ListView x:Name="listview" ItemsSource="{x:Bind members}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:IFactionMember">
<Button >
<Button.Template>
<ControlTemplate TargetType="Button" >
<Grid Padding="10,0">
<TextBlock Text="{Binding testtext}" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
x:bind lacks some of the features of {Binding}, in x:Bind, Path is rooted at the Page by default, not the DataContext, it seems like if you are using x:bind here, it will try to find the property at the MainPage, so that it will not find the correct property.
My DashBoardSimpleCountObject has 2 values: MyName and MyValue.
I use an ObservableCollection<DashboardSimpleCountObject> called MyData.
I want to show a picture, as long as MyValue is null.
However, the picture ("loading") is only shown at the last item of my ObservableCollection (no matter, how many items are in there). As soon as a MyValue is set (with anything other than null), it is automatically updated and shown correctly - that works fine at all items.
<ItemsControl x:Name="_control" ItemsSource="{Binding MyData}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="25">
<Label FontSize="14" Content="{Binding MyName}" />
<Label Margin="0,25" HorizontalContentAlignment="Right" FontSize="29" FontWeight="ExtraBold" Foreground="{Binding MyColor}">
<Label.Style>
<Style TargetType="{x:Type Label}">
<Setter Property="Content" Value="{Binding MyValue}" />
<Style.Triggers>
<DataTrigger Binding="{Binding MyValue}" Value="{x:Null}">
<Setter Property="Content">
<Setter.Value>
<Image Width="32" Height="32" Source="{DynamicResource loading}" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
What am I doing wrong?
Thank you very much in advance! :)
It seems, the nature of DynamicResource causes this issue.
Simply changing DynamicResource to StaticResource did the trick.
So, the DataTrigger worked just fine from the beginning. The image simply did only show up once due to being loaded as a DynamicResource.
SOLUTION
The shortest Code to archieve the desired result was for me:
<ItemsControl ItemsSource="{Binding GeneralBoolSettings}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<ToggleSwitch IsOn="{Binding IsOn, Mode=TwoWay}" OffContent="{Binding OffContent}" OnContent="{Binding OnContent}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
ORIGINAL QUESTION
I'm having trouble with something as easy as stretching the Items of an ItemControl horizontally. As I'm working with XAML, I dont have things like SharedSizeGroupas in WPF.
The solutioon presented here: Horizontally Stretch Content in an ItemsControl does unfortunately not work for me.
My Code:
<ItemsControl ItemsSource="{Binding GeneralBoolSettings}" HorizontalContentAlignment="Stretch">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<ToggleSwitch IsOn="{Binding IsOn, Mode=TwoWay}" OffContent="{Binding OffContent}" OnContent="{Binding OnContent}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Some Screenshots from the Designer:
ItemControl has the correct (stretched) Size
DataTemplate is already too small
I would like to avoid binding to a parent width; in my previous attempts, the width was sometimes (re-)set to 0, and I would have had to remove the binding and add it again. Also: Please no code and / or event catcher, there must be an elegant solution to this rather basic problem!
Honestly, I'm a bit surprised I can't get this to work. Mabye you can recommend a good book / website to learn a systematic approach of the basics of XAML (while we're at it)?
You also need to set the horizontal alignment of each item container to stretch using ItemContainerStyle property of ItemsControl.
<ItemsControl ItemsSource="{Binding GeneralBoolSettings}" HorizontalContentAlignment="Stretch">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<ToggleSwitch IsOn="{Binding IsOn, Mode=TwoWay}" OffContent="{Binding OffContent}" OnContent="{Binding OnContent}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
I am trying to fire event on tap of listbox item and get the item clicked but the tap event is not firing, please help.
<ListBox Margin="0,40,0,0"
ItemsSource="{Binding Documents}" IsHitTestVisible="True"
Width="450"
VirtualizingStackPanel.VirtualizationMode="Recycling">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="150" Margin="5"
Width="150" Background="Aqua">
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" />
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<commands:MvxEventToCommand Command="{Binding OpenFileCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Are you sure the event never get fired? Maybe you were tapping outside the Grid? Listbox item content (the grid in this case) is not stretcing throughout listbox width, it is aligned left by default. To confirm, try to tap at left most area of listbox item and see if the event fired with that.
Assuming the problem is caused by listbox item content not stretching, you can try to set HorizontalContentAlignment="Stretch" to fix it :
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
This problem is about the listbox itself and not it's cells. If I put listbox into a viewbox, and click on an item, the whole listbox will be surrounded with a 1px border. I do not want that, because it is ugly. How to remove this border?
Details:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Viewbox Grid.Row="1" Stretch="Uniform">
<StackPanel Orientation="Horizontal" Margin="0,20,0,20">
<Grid Width="200">
<ListBox ItemsSource="{Binding Rajzelemek}" Background="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentControl Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Content="{Binding Ikonja}" Width="25" Height="25" VerticalAlignment="Center" />
<TextBlock Text="{Binding}" VerticalAlignment="Center" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</StackPanel>
</Viewbox>
</Grid>
If I comment the <Viewbox Grid.Row.... part, everything is fine, but not scaled. I want stuff to get scaled, well that is why I use the viewbox, but I do not want this border:
The code above was put on a metro BlankPage1 too, and made the same thing.
I think you're looking for what's in the ListBoxItem template wherein there's a Rectangle acting as a Focus Visual, if you check out the default template you'll see it with a default brush attributed to it (FocusVisualWhiteStrokeThemeBrush) which you could either change in the template, or provide your own resource for it to find before it hits the default dictionaries like;
<SolidColorBrush x:Key="FocusVisualWhiteStrokeThemeBrush" Color="Transparent" />
Hope this helps.
EDIT
Sorry I was going by the picture you have, thought it was the item. In any case since your ViewBox is the culprit you just need to interact with the Border control within it >like you showed in a previous post of your own< where you're the one making that border. Something like;
<Viewbox>
<Viewbox.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
</Style>
</Viewbox.Resources>
...
</ViewBox>