I'm new in XAML for Windows Phone 8.1 and have some troubles with
making a Stackpanel clickable
collapse Item, when clicked
My work so far looks like that:
And the Code to that (please correct me, if there are major flaws):
<Border CornerRadius="15" Background="#FF595656" Margin="0" Grid.ColumnSpan="2" Height="80">
<StackPanel Orientation="Horizontal">
<StackPanel Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0,0,0,0" VerticalAlignment="Center" Width="51">
<Image HorizontalAlignment="Left" Height="51" Margin="0,15,0,0" Width="51" Source="Assets/fish.png" Stretch="Fill" RenderTransformOrigin="2.307,0.881" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Width="10" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0" VerticalAlignment="Top" Width="310">
<TextBlock HorizontalAlignment="Left" Height="25" Margin="0,20,0,0" TextWrapping="Wrap" Text="Entry 1" Width="310" VerticalAlignment="Top" FontSize="18" Foreground="Black" FontWeight="Bold"/>
<TextBlock HorizontalAlignment="Left" Height="17" Margin="0" TextWrapping="Wrap" Text="Short description Entry 1" Width="310" VerticalAlignment="Top" Foreground="#FF0097FF"/>
</StackPanel>
</StackPanel>
</Border>
This code will later be wrapped inside a ListBox with Image, Entry 1 and the short description being bound:
<ListBox x:Name="ListBox1" Margin="0"
Width="400" Height="200" HorizontalAlignment="Left"
ItemsSource="{Binding}" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" >
<ListBox.ItemTemplate>
<DataTemplate>
// the code above
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So my question is:
How can I make a nice looking expansion/collapse of each Item in the ListBox, whenever I click on it?
Thank you very much in advance.
The real question is here is what do you want it to collapse to? There are too many possible ways to collapse some visual data item. Do you just want to change the height of the item or do you want some fancy animation that collapse some property?
If the height is what you're looking for it's pretty easy. Just attach an Tap Event on that Border of yours. On a sidenote, you probably want to edit the ItemContainerStyle to have <Setter Property="HorizontalContentAlignment" Value="Stretch"/> so the Listbox will stretch across the screen, otherwise imho it's un-useable.
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Red" BorderThickness="0,1" Tap="Border_Tap">
<StackPanel>
<!--- rest of template --->
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
Then calculate the Minimum height you want to show (make sure it's actually useable, meaning... I can Tap on it again to show the whole thing without using a Mag Glass).
private void Border_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
int minHeight = 40; // change to whatever you want
Border b = sender as Border;
if (b.ActualHeight > minHeight)
{
b.Height = minHeight;
}
else
{
b.Height = double.NaN; // this will change the height back to Auto, showing everything
}
}
Code In Action
This is just a quick solution to your question. Some people on here would rather have you create a StoryBoard Animation on the Height Property of the Selected state in the VisualStateManager. If you reword or create a new question explicitly stating you want a VisualStateManager solution, I will provide you one as well. Good luck.
Related
And am creating a sorting app and in some cases i will hide the gridview item and i encountered the same error as this person:
Hide GridViewItem and reposition items in GridView
So I implemented the fix and it worked, but it suddenly disallowed be to drag and reorder items in my GridView.And from what I can tell it only appeared after I implemented the WrapPanel into my gridView.ItemsPanel and by removing it I am immediately able to reorder again.
and here's my XML code:
<Page
x:Class="ImageSorting.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ImageSorting"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data ="using:ImageSorting.Models"
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid HorizontalAlignment="Stretch" Height="57" VerticalAlignment="Top">
<Border BorderBrush="Black" BorderThickness="0 0 0 1" HorizontalAlignment="Stretch" Height="57" VerticalAlignment="Top"/>
<Button x:Name="SelectFolder" Content="Select Folder" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,11,10,0" Background="#80a4ec" Click="SelectFolder_Click"/>
<Button x:Name="AddFolder" Content="Add Folder" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,11,125,0" Background="#84eeb1" Click="AddFolder_Click" />
<Button x:Name="Save" Content="Save" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,11,230,0" Background="#ece880" Click="Save_Click"/>
<ComboBox x:Name="ImageFolder" HorizontalAlignment="Left" VerticalAlignment="Top" Margin=" 20 11 0 0" SelectedIndex="0" SelectionChanged="ImageFolder_SelectionChanged">
<ComboBoxItem>All Images</ComboBoxItem>
</ComboBox>
</Grid>
<GridView x:Name="ImageGrid" HorizontalAlignment="Stretch" Margin="10,60,10,0" VerticalAlignment="Stretch" ItemsSource="{x:Bind ImgList, Mode=OneWay}" CanDragItems="True" AllowDrop="True" CanReorderItems="True" SelectionMode="Extended">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Images">
<StackPanel>
<Image x:Name="Image" Width="206" Height="158" Source="{x:Bind imageData}" DoubleTapped="Image_DoubleTapped"/>
<StackPanel Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" FontSize="15" Text="{x:Bind imageNumber}" Margin="10 5 0 0"/>
<TextBlock HorizontalAlignment="Left" TextAlignment="Left" Width="100" FontSize="15" Text="{x:Bind altChar}" Margin="10 5 0 0"/>
<CheckBox x:Name="altNumber" HorizontalAlignment="Right" MinWidth="0" Margin="35 0 0 0" Click="altNumber_Click"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" AllowDrop="True">
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
<Grid x:Name="ConfirmGrid" HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Bottom" Background="White" Visibility="Collapsed">
<Border BorderBrush="Black" BorderThickness="0 1 0 0" HorizontalAlignment="Stretch" Height="57" VerticalAlignment="Top" />
<Button x:Name="FolderConfirm" Content="Confirm" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,10,0" RenderTransformOrigin="-0.128,7.104" Click="FolderConfirm_Click" />
</Grid>
</Grid>
Image of when i try to drag and reorder GridView's Item with WrapPanel:
Am I missing something that is stated in the WinRTXamlToolkit, or there no way around this problem.
UPDATE 2017 Nov 27
So after some tinkering as suggested by # Xavier Xie - MSFT so try implement the drag and drop to reorder feature for winRT toolkit by inheriting the WrapPanel class and trying it from there.
Here's what I have found out so far,
winRT toolkit WrapPanel inherits Panel class
WrapPanel from other libraries like UWPCommunityToolkit
also inherits Panel hence making me thing that all Dynamic Wrapping needs to inherit the Panel class.
Panel class doesn't have any code for detecting item drag event (either that or I am dragging the wrong thing)
ItemsWrapPanel is a seal class making it impossible for me to inherit and that goes for any Interface it inherits as well
And this is concluded what I have found out so far and will continue to update this if I found anything.
Credits goes to # Xavier Xie - MSFT for pointing me into the right direction for this.
The WrapPanel of WinRTXamlToolkit has not implemented reordering function. You would need to implement the reordering manually, listening to the drag & drop events.
If you want to implement by yourself, you could read Jerry Nixon's blog Walkthrough: Reordering items in a GridView with Drag and Drop to understand the basic principle of GridView's reordering.
As a easy workaround, you could use ItemsStackPanel control as its ItemsPanel, it has implemented reordering function. This control also will not have space item there when you hide one item.
Can someone give me an example of how to style a button with XAML hat has three states (hover, normal, pressed). i want the whole area of the button to be covered with an image (one for each of the three different states) and i want text to be on top that also has three different colors for the different states. i have something like this already (without the color states on the textblock). the problem i'm having at this point is that the textblock is blocking the input events for the button undernearth (i also haven't implemented the color changes for the textblock....
current code:
<DataTemplate x:Name="SubjectItemTemplate">
<Canvas Width="225" Height="225">
<Button Canvas.Left="0" Canvas.Top="0"
Command="{Binding ElementName=LayoutRoot, Path=DataContext.NavigateToUnitsPage}"
CommandParameter="{Binding}">
<Button.Template>
<ControlTemplate>
<Grid Background="{Binding LightThemeColor}" Width="205" Height="205">
<controls:ImageButton HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,0,0,0"
NormalStateImageSource="{Binding ImageUriNormal}"
HoverStateImageSource="{Binding ImageUriHover}"
PressedStateImageSource="{Binding ImageUriPressed}" Command="{Binding ElementName=LayoutRoot, Path=DataContext.NavigateToUnitsPage}"
CommandParameter="{Binding}"/>
<TextBlock Text="{Binding Name}" FontSize="18" TextWrapping="Wrap" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,168,0,0" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Canvas>
</DataTemplate>
The reason that the ImageButton events are not being handled as expected with the TextBlock is because the TextBlock is located in-line with the ImageButton and not contained inside the ImageButton. To change this, the TextBlock has to be placed inside the ImageButton.
<controls:ImageButton HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,0,0,0"
NormalStateImageSource="{Binding ImageUriNormal}"
HoverStateImageSource="{Binding ImageUriHover}"
PressedStateImageSource="{Binding ImageUriPressed}" Command="{Binding ElementName=LayoutRoot, Path=DataContext.NavigateToUnitsPage}" CommandParameter="{Binding}" >
<TextBlock Text="{Binding Name}" FontSize="18" TextWrapping="Wrap" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,168,0,0" />
</controls:ImageButton>
I have a listbox inside of a stack panel inside of a border in a silverlight application and when ever I add anything to the listbox it increases in height so the scrollbar is never used and it extends beyond the boundaries of the border element. I have tried explicitly setting the height attribute of the listbox, the border and the stack panel and it still goes beyond this.
Here is my code:
<Border x:Name="articlePane">
<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top">
<Button Content="Latest" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
<Button Content="Pending" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
<Button Content="Done" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
</StackPanel>
<ListBox x:Name="articleList" Margin="5" Background="Transparent" ItemsSource="{Binding}"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Center">
<Image x:Name="articleImage" />
<TextBlock x:Name="articleTitle" Text="{Binding Path=Title}" FontSize="18" FontWeight="Bold"
Margin="5"/>
<TextBlock x:Name="articleDate" Text="{Binding Path=Date}" FontSize="14" Foreground="Gray"
Margin="5"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Border>
I have a feeling that the StackPanel just keeps on adding height forever. I think in this instance you'd be better off with a Grid layout within your Border. Put the Button StackPanel in one height defined row, and the ListBox in an autosizing * height row. This way Grid will stick within the confines of your form.
I have ListBox and DataTemplate
I need Set GroupBox Heigth = 300
How to do it?
<DataTemplate x:Key="data_template">
<GroupBox Header="Категория" Width="300" HorizontalAlignment="Stretch" x:Name="GroupBox">
<DockPanel Tag="{Binding id}">
<Button Click="Button_Click" DockPanel.Dock="Top" >
<Button.Content>
<DockPanel>
<TextBlock Text="{Binding title}" TextWrapping="Wrap" DockPanel.Dock="Top" Padding="5" HorizontalAlignment="Center" Foreground="#FFB51414" />
<l:ScrollViewerEx VerticalScrollBarVisibility="Auto" >
<TextBlock Text="{Binding description}" DockPanel.Dock="Top" TextWrapping="Wrap" Padding="5" IsHitTestVisible="False" />
</l:ScrollViewerEx>
</DockPanel>
</Button.Content>
</Button>
</DockPanel>
</GroupBox>
</DataTemplate>
In case, someone tried to resolve my previous question, I did it like the following:
DataTemplate mycolumnDataTemplate = null;
var dataTemplateStream = new SomeClass().GetType().Assembly.GetManifestResourceStream("Some.Namespace.SomeReosurceName.xaml");
string dataTemplateString = new System.IO.StreamReader(dataTemplateStream).ReadToEnd();
dataTemplateString = dataTemplateString.Replace("[0]", browserColumn.ColumnName);
mycolumnDataTemplate = XamlReader.Load(dataTemplateString) as DataTemplate;
What are you trying to achieve? Do you want the GroupBox Height to be changed at the runtime of your application, when some event occurred or some data has changed? If so, then what you are probably looking for is a data trigger or event trigger, which you simply need to add to your DataTemplate.
So I have this Xaml inside a ListBox Item Template:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="22" Width="Auto">
<Image Margin="-2,0,0,0" Source="{Binding Path=ADsPath, Converter={StaticResource ImxConverter}}" HorizontalAlignment="Left" Width="22" />
<TextBlock Margin="20,3,0,0" Text="{Binding Path=DisplayValue}" Width="Auto" />
<Rectangle Fill="White" Stroke="White" Margin="-2,0,-2,0.5" VerticalAlignment="Bottom" Height="1" Width="Auto" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
The idea is that the rectangle, provides a thin white line across the bottom of the entire ListBox Item; however, with the Xaml above, it only extends as long as the text, not to the full width of the ListBox.
Setting your width to Auto basically tells it to only be large enough to fit everything inside. I think you need to set your Grid's HorizontalAlignment to Stretch for it to work properly.
Edit:
I did a small sample app. Here's how I would do what you are trying to do:
On your actual listbox, I would have the HorizontalContentAlignment property set to Stretch
and
I would change your Grid to a DockPanel:
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel Height="22" HorizontalAlignment="Stretch">
<Rectangle Fill="White" Stroke="White" Margin="-2,0,-2,0.5" DockPanel.Dock="Bottom" Height="1"/>
<Image Margin="-2,0,0,0" Height="20" DockPanel.Dock="Left" Width="22" />
<TextBlock Margin="20,3,0,0" Text="Daniel Manning" DockPanel.Dock="Left"/>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Have you tried removing Width="Auto"? Auto is saying "only make me as big as I need to be" which, in your case, is determined by the length of the text. The default is "Stretch" which means "hey container, do me a favor and make me as wide as you are".