As you can see above, I need it to reshuffle itself into alignment. Obviously the items still exist, is there a way to completely ignore them?
I have an ObservableCollection:
public static volatile ObservableCollection<MyVideo> MyVideoModels = new ObservableCollection<MyVideo>();
This gets filled with the MyVideo objects.
Binding it to my GridView like so:
public VideosFoundView()
{
this.InitializeComponent();
this.AddVideoFolderGridView.ItemsSource = VideosFoundView.MyVideoModels;
}
The DataTemplate I am using for the GridView.
<GridView Grid.Row="2" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="AddVideoFolderGridView">
<GridView.ItemTemplate>
<DataTemplate>
<Border BorderThickness="5">
<Image Source="{Binding FullImageLocationOnDisk}" MaxHeight="300" MaxWidth="200" DoubleTapped="gridViewItem_DoubleTapped" Loaded="gridViewItem_Loaded" Loading="gridViewItem_Loading">
</Image>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
And I have a static ToggleSwitch above this GridView like so:
<Grid Grid.Row="1">
<Grid>
<TextBlock Text="Ingore Image Not Found"/>
<ToggleSwitch x:Name="ToggleSwitchIgnoreImages" Toggled="ignoreImages_Toggled"/>
</Grid>
</Grid>
Which does:
private void ignoreImages_Toggled(object sender, RoutedEventArgs e)
{
ToggleSwitch tSwitch = (ToggleSwitch)(sender as ToggleSwitch);
if (tSwitch.IsOn)
{
for(int i = 0; i < VideosFoundView.MyVideoModels.Count; i++)
{
if(VideosFoundView.MyVideoModels[i].FullImageLocationOnDisk == "ms-appx:///Assets/image-not-found.gif")
{
var gridViewItem = (GridViewItem)this.AddVideoFolderGridView.ContainerFromIndex(i);
gridViewItem.Visibility = Visibility.Collapsed;
}
}
}
else
{
for (int i = 0; i < VideosFoundView.MyVideoModels.Count; i++)
{
//VideosFoundView.MyVideoModels[i].Visibility = "Auto";
var gridViewItem = (GridViewItem)this.AddVideoFolderGridView.ContainerFromIndex(i);
gridViewItem.Visibility = Visibility.Visible;
}
}
}
However the problem is that the items are still taking up space on my GridView, and the other items do not re-position themselves accordingly.
The items are still taking up space on the GridView, when the GridViewItem is collapsed. It might because the ItemTemplate has not be refreshed, the space is still reserved.
As a workaround, there is a port of the Toolkit's WrapPanel for UWP in the project WinRTXamlToolkit.
You can get it from NuGet.
Then in your Page add this prefix:
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
Now you can use <toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel> as it was before.
For example:
<GridView x:Name="AddVideoFolderGridView">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" >
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Border BorderThickness="5">
<Image Source="{Binding FullImageLocationOnDisk}" MaxHeight="300" MaxWidth="200" DoubleTapped="gridViewItem_DoubleTapped" Loaded="gridViewItem_Loaded" Loading="gridViewItem_Loading">
</Image>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Solution from here: Not showing items with Visibility=Collapsed in Windows 8.1 GridView
tldr:
Edit the template of your GridView and replace the ItemsWrapGrid in the ItemsPanelTemplate with the WrapPanel you can find here http://codepaste.net/8gr5go
Related
I'm creating a wpf application and capturing images from my usb webcam. What I have tried is store all captured images in a List and show them in a Listview
public List<BitmapImage> listOfCapturedImages = new List<BitmapImage>();
private void addNewImageButton_Click(object sender, RoutedEventArgs e)
{
CameraWindow cw = new CameraWindow(this);
cw.newlyCapturedImage += (BitmapImage newImage) =>
{
listOfCapturedImages.Add(newImage);
newlyAddedImage.Source = newImage;
};
cw.Show();
}
XAML:
<ListView ItemsSource="{Binding listOfCapturedImages}" Height="345" Margin="577,10,10,0" VerticalAlignment="Top">
<ListView.View>
<GridView>
<GridView.ColumnHeaderContainerStyle>
<Style TargetType="GridViewColumnHeader">
<Setter Property="Visibility" Value="Collapsed"/>
</Style>
</GridView.ColumnHeaderContainerStyle>
<GridViewColumn x:Name="previewImagesColumn">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Button x:Name="firstImageOflistViewButton" Content="{Binding listOfCapturedImages}" Height="50">
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter/>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
Could someone help me please, what I'm missing?
Thanks a lot guys, I have fixed my problem with your helps. I want to share my working code just for someone else who may have the same problem with me. Here is the working code:
public ObservableCollection<BitmapImage> listOfCapturedImages { get; } =
new ObservableCollection<BitmapImage>();
private void addNewImageButton_Click(object sender, RoutedEventArgs e)
{
CameraWindow cw = new CameraWindow(this);
cw.newlyCapturedImage += (BitmapImage newImage) =>
{
listOfCapturedImages.Add(newImage);
newlyAddedImage.Source = newImage;
};
cw.Show();
}
I also have added this.DataContext = this;.
public Test(Window window)
{
InitializeComponent();
this.DataContext = this;
}
And finally XAML:
<ListView ItemsSource="{Binding listOfCapturedImages}" Height="345" Margin="577,10,10,0" VerticalAlignment="Top">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="1"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You are binding to field not a property.
Change:
public List<BitmapImage> listOfCapturedImages = new List<BitmapImage>();
to
public ObservableCollection<BitmapImage> ListOfCapturedImages {get;} = new ObservableCollection<BitmapImage>();
ObservableCollection is the collection that will notify of changing its contents and the binding will update after you add items to it. List will not do that.
Also include some Image displaying item:
<ListView ItemsSource="{Binding ListOfCapturedImages}" >
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Couple of problems
Use ObservableCollection instead of List. List do not notify View to update itself when an item is added to it. ObservableCollection does that.
listOfCapturedImages is a Field. Even if you set is to public, it cannot be used to bind in WPF. Because Field are invisible to XAML, whereas Properties are visible. So do this
public ObservableCollection<BitmapImage> listOfCapturedImages { get; } =
new ObservableCollection<BitmapImage>();
You should have Image control in your DataTemplate. This is what i am using:
<ListView ItemsSource="{Binding listOfCapturedImages}" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="1"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I'm trying to display a GridView which alternates a row with only one expanded item and a row that displays many items, let's say three.
In both of the cases, the items should fill the page width. This means that the row containing multiple items should divide the space in three equal areas.
My attempt was to use VariableSizedWrapGrid as item panel.
<GridView x:Name="rowGrid" IsSwipeEnabled="False" ItemsSource="{Binding AppCollection}"
ItemTemplateSelector="{StaticResource HomeDataTemplateSelector}" SelectionMode="None" IsItemClickEnabled="True" Margin="0,0,12,0">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
Then I set ColumnSpan property inside the data template selector:
public class HomeDataTemplateSelector : DataTemplateSelector
{
public DataTemplate DefaultTemplate { get; set; }
public DataTemplate WideItemTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
var lv = GetListView(container);
if (lv != null)
{
var i = lv.Items.IndexOf(item);
if (i % 4 == 0)
{
VariableSizedWrapGrid.SetColumnSpan(container as UIElement, 3);
return WideItemTemplate;
} else {
VariableSizedWrapGrid.SetColumnSpan(container as UIElement, 1);
return DefaultTemplate;
}
}
return DefaultTemplate;
}
public static GridView GetListView(DependencyObject element)
{
var parent = VisualTreeHelper.GetParent(element);
if (parent == null)
{
return null;
}
var parentListView = parent as GridView;
return parentListView ?? GetListView(parent);
}
}
Here are the two templates for completeness:
<DataTemplate x:Key="DefaultItemDataTemplate">
<StackPanel Height="170" Background="Transparent">
...
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="WideItemDataTemplate">
<StackPanel Height="170" Background="Transparent">
...
</StackPanel>
</DataTemplate>
This is what I'm getting. It's like the first wide item propagates its width to the others elements.
I followed this article.
You need to set Orientation as "Horizontal" for VariableSizedWrapGrid. And you would have to set width for StackPanel which is in DataTemplate. Then it will work.
<Page.Resources>
<DataTemplate x:Key="DefaultItemDataTemplate">
<StackPanel Height="170" Background="Transparent">
<Image Source="{Binding}"></Image>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="WideItemDataTemplate">
<StackPanel Height="170" Width="250" Background="Transparent">
<Image Source="{Binding}"></Image>
</StackPanel>
</DataTemplate>
<local:HomeDataTemplateSelector x:Name="HomeDataTemplateSelector" DefaultTemplate="{StaticResource DefaultItemDataTemplate}" WideItemTemplate="{StaticResource WideItemDataTemplate}"></local:HomeDataTemplateSelector>
</Page.Resources>
<Grid x:Name="grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<GridView x:Name="rowGrid" IsSwipeEnabled="False" ItemsSource="{Binding AppCollection}"
ItemTemplateSelector="{StaticResource HomeDataTemplateSelector}" SelectionMode="None" IsItemClickEnabled="True" Margin="0,0,12,0">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
See screenshot
is there any control that can auto resize items inside. I need to contain textblocks inside ItemsControl only in one row, so if total items width larger then container.Width, it will change each item's width. UWP
<ItemsControl Grid.Column="1"
ItemsSource="{Binding Path=NavigationHistory, ElementName=Main, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
x:Name="BroadComb"
MaxHeight="24"
Margin="10,0,0,0" VerticalAlignment="Center" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<HyperlinkButton Command="{Binding Path=NavigateCommand, ElementName=Main}" CommandParameter="{Binding}" Margin="10,0,0,0" Foreground="{ThemeResource AppAccentForegroundLowBrush}" >
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock VerticalAlignment="Center"
TextTrimming="None"
Text="{Binding Path=DisplayName}"
FontSize="10"
FontWeight="Bold"
Foreground="{ThemeResource AppAccentForegroundLowBrush}">
<i:Interaction.Behaviors>
<core:DataTriggerBehavior Binding="{Binding Path=CanBeTrim}" Value="True">
<core:ChangePropertyAction PropertyName="TextTrimming" Value="WordEllipsis"/>
</core:DataTriggerBehavior>
<core:DataTriggerBehavior Binding="{Binding Path=CanBeTrim}" Value="False">
<core:ChangePropertyAction PropertyName="TextTrimming" Value="None"/>
</core:DataTriggerBehavior>
</i:Interaction.Behaviors>
</TextBlock>
<FontIcon Margin="10,0,0,0" HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="ms-appx:/Assets/Fonts/MyBook-Regular.ttf#MyBook"
FontSize="10"
Glyph="2" Foreground="{ThemeResource AppAccentForegroundLowBrush}" />
</StackPanel>
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
One possibility is to use a Grid with your desired controls in it's columns set to HorizontalAlignment="Stretch":
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="abc" HorizontalAlignment="Stretch" />
<TextBlock Grid.Column="1" Text="xyz" HorizontalAlignment="Stretch" />
</Grid>
This will stretch both controls over the maximum available width according to the Grid's container and make them smaller or bigger if the available space changes.
Most of the time, you will only want to set one column to fill the available space (Width="*") and set the other columns to a fixed or relative width. You can experiment with those settings.
Else we would need a more exact specification of what you want to achieve.
is there any control that can auto resize items inside. I need to contain textblocks inside ItemsControl only in one row, so if total items width larger then container.Width, it will change each item's width. UWP
What you need is to change the default ItemsPanel of GridView. You can create your own Custom Panel to let the texts be arranged in only one row:
Create your own custom Panel OneRowPanel.cs:
public class OneRowPanel:Panel
{
double itemHeight=0;
protected override Size MeasureOverride(Size availableSize)
{
int count = Children.Count;
foreach (FrameworkElement child in Children)
{
child.Measure(new Size(availableSize.Width/count,availableSize.Height));
if (child.DesiredSize.Height > itemHeight)
{
itemHeight = child.DesiredSize.Height;
};
}
// return the size available to the whole panel
return new Size(availableSize.Width, itemHeight);
}
protected override Size ArrangeOverride(Size finalSize)
{
// Get the collection of children
UIElementCollection mychildren = Children;
// Get total number of children
int count = mychildren.Count;
// Arrange children
int i;
for (i = 0; i < count; i++)
{
//get the item Origin Point
Point cellOrigin = new Point(finalSize.Width / count * i,0);
// Arrange child
// Get desired height and width. This will not be larger than 100x100 as set in MeasureOverride.
double dw = mychildren[i].DesiredSize.Width;
double dh = mychildren[i].DesiredSize.Height;
mychildren[i].Arrange(new Rect(cellOrigin.X, cellOrigin.Y, dw, dh));
}
// Return final size of the panel
return new Size(finalSize.Width, itemHeight);
}
}
Use it in your Xaml and set the TextBlock.TextTrimming to CharacterEllipsis:
<Page
x:Class="AutoResizeItemsSample.MainPage"
...
mc:Ignorable="d">
<Page.Resources>
<DataTemplate x:Key="TextTemplate">
<TextBlock Text="{Binding Text}" TextTrimming="CharacterEllipsis">
</TextBlock>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Name="rootPanel">
<GridView Name="gridView" ItemTemplate="{StaticResource TextTemplate}" >
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<local:OneRowPanel ></local:OneRowPanel>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</StackPanel>
</Grid>
</Page>
Here is the Result:
Here is the complete demo:AutoResizeItemsSample.
Solve this easily with ListView. The ItemsPanel is already a StackPanel and the individual item will resize as needed. If you need the horizontal width of each item to be different, that's supported out of the box, too. I think the solution is to simply choose the ListView control.
I am using DataTemplate where I've declared two Buttons and they are invisible by default. Now I want to make them Visible in code behind based on some condition but I am unable to find these controls.
Following is my code:
XAML:
<ItemsControl x:Name="SynonymsItemsControl" ItemsSource="{Binding Synonyms}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="SynonymsStackPanel">
<CheckBox x:Name="SynonymsChkBx" Content="{Binding Display}" Margin="10,0,0,0" />
WANT TO FIND THESE TWO BUTTONS
<Button x:Name="AddSynonymsBtn" Margin="525, 0, 0, 0" ToolTipService.ToolTip="Add Synonyms" Visibility="Collapsed">
<Image Source="/Images/AddSynonyms.png" Height="24"/>
</Button>
<Button x:Name="CancelSynonymsBtn" Margin="600, 0, 0, 0" ToolTipService.ToolTip="Cancel Synonyms" Visibility="Collapsed">
<Image Source="/Images/CancelSynonyms.png" Height="24"/>
</Button>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
CODE-BEHIND:
I'm able to find ItemControl by doing this,
System.Windows.Controls.ItemsControl itemControl = (from sp in selectedTreeViewItem.GetVisualDescendants().OfType<System.Windows.Controls.ItemsControl>()
where sp.Name == "SynonymsItemsControl"
select sp).FirstOrDefault();
Now When I want to find buttons which are declared inside this ItemsControl->DataTemplate, it comes as Null
Button AddSynonymsBtn = (from btn in itemControl.GetVisualDescendants().OfType<Button>()
where btn.Name == "AddSynonymsBtn"
select btn).FirstOrDefault();
So I am wondering that do I need to find ItemsControl at all? if so, then why am I unable to find these buttons?
I've also tried
var findControl = temControl.ItemContainerGenerator.ContainerFromIndex(index); but same result(Null).
You can easly get controls from behind by using Template.FindName(string Name);
private Button _partSynonyms = null;
public MyControlTemplate{
Loaded += (sender, e) => OnLoaded();
}
private void OnLoaded(){
_partSynonyms = (Button)Template.FindName("PART_AddSynonymsBtn"); //You "should" use PART_ as a prefix in a Template
if(_partSynonyms == null)
//Button not found -> Log some error but you should not throw an exception
}
How to resize item in ListBox from C#? I can do ListBox.Height = 100; but I don't know how to resize items in ListBox. Help me, please.
I need to change the size of items in listBox and their number using the ManipulationDelta method.
Main xaml code:
<ListBox x:Name="tileList"
Grid.Row="0"
Margin="5"
ManipulationCompleted="tileList_ManipulationCompleted"
ManipulationDelta="tileList_ManipulationDelta">
<ListBox.RenderTransform>
<CompositeTransform/>
</ListBox.RenderTransform>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:HubTile x:Name="hubMain"
Title="{Binding Title}"
Margin="3"
DisplayNotification="{Binding DisplayNotification}"
GroupTag="{Binding GroupTag}"
Message="{Binding Message}"
Notification="{Binding Notification}"
Size="Medium"
Source="{Binding ImageUri}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and C# code:
private void tileList_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
if (e.PinchManipulation != null)
{
double newWidth = 0.0, newHieght = 0.0;
foreach (tileList lv in tileList.Items)
{
lv.Height = 10;
}
}
}
private void tileList_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
{
m_Zoom = 200 / 10;
}
Thanks.
You can always change the ItemTemplate of your ListBox inside the Xaml page
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Height="200" Width="200" /> //This is just an example you can use any control
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Hope this is what you wanted.
You need to access the Items of the Listbox and set the individual height for them like this,
foreach (ListBoxItem lv in YourListbox.Items)
{
lv.Height = 10;
}