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.
Related
I would like to create a Hub with several HubSections via code. Each HubSection owns a single GridView so it look like every HubSection is a table (fullscreen) and I swipe left/right to view every table.
In my XAML page is only Hub the other stuff should be done by code. The HubSections should be created at runtime. For this I use a local settings storage to save some information about this, like how many HubSections etc.
Creating new HubSections is no problem but I'm stuck at adding a GridView to each HubSection because I don't understand the logic here. It looks like I have to add a DataTemplate and a GridView but my attempts all failed.
Note: each GridView has also it's own databinding from a Observable Collection.
So how to add a (?DataTemplate?) GridView with databinding to a HubSection ?
With a DataTemplate you build your layout. I have used in a Project following template to show a few data per day and create one Section for each day:
<Page.Resources>
<CollectionViewSource x:Name="HubViewModel"/>
<DataTemplate x:Key="DataTemplate">
<Grid Background="Transparent" Width="300" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,20">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" HorizontalAlignment="Center">
<TextBlock Text="{Binding SumShipmentsSA}" Style="{ThemeResource HeaderTextBlockStyle}" TextAlignment="Center" TextWrapping="NoWrap"/>
</StackPanel>
<StackPanel Grid.Row="1" HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal">
<TextBlock x:Uid="SummaryHubNat" Text="National" FontSize="10" Width="100" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBlock Text="{Binding CountShipmentsNationalSA}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock x:Uid="SummaryHubInt" Text="International" FontSize="10" Width="100" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBlock Text="{Binding CountShipmentsInternationalSA}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock x:Uid="SummaryHubCharter" Text="Charter" FontSize="10" Width="100" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBlock Text="{Binding CountShipmentsCharterSA}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</Page.Resources>
.
.
<Hub x:Name="MainHub" DataContext="{Binding Source={StaticResource HubViewModel}}" Margin="0,0,0,20"/>
In the Code page I used the following method to create to the Section:
private void AddHubSection(IEnumerable<DaySummary> list)
{
if (list != null)
{
list = list.OrderByDescending(x => x.Date);
foreach (var item in list)
{
if (item.Date.Date.Equals(DateTime.Now.Date))
{
continue;
}
HubSection hubSection = new HubSection();
TextBlock headerTextBlock = new TextBlock();
headerTextBlock.Text = item.Date.ToString("dddd dd.MMM");
headerTextBlock.FontSize = 15;
hubSection.Header = headerTextBlock;
hubSection.Margin = new Thickness(0);
object dataTemplate;
this.Resources.TryGetValue("DataTemplate", out dataTemplate);
hubSection.ContentTemplate = dataTemplate as DataTemplate;
hubSection.DataContext = item;
hubSection.DoubleTapped += HubSection_DoubleTapped;
MainHub.Sections.Add(hubSection);
}
}
}
I think the example can help you have fun while trying.
I am trying to access textblocks and textboxes in a listview, but cannot get them in C# code because they are inside an ItemTemplate and DataTemplate. Here is a sample of the XAML code:
<ListView x:Name="VehicleList" HorizontalAlignment="Center" Height="120" Margin="0" VerticalAlignment="Center" Width="1119" Background="{ThemeResource CheckBoxDisabledForegroundThemeBrush}" SelectionChanged="VehicleList_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="VehicleGrid" Height="52" Width="1117" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="318*"/>
<ColumnDefinition Width="425*"/>
<ColumnDefinition Width="366*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="Year" Grid.Column="0" TextWrapping="Wrap" Text="{Binding Year}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,20,0,0" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="321" FontSize="26.667"/>
<TextBlock x:Name="Make" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Make}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,20,0,0" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="425" FontSize="26.667" />
<TextBlock x:Name="Model" Grid.Column="2" TextWrapping="Wrap" Text="{Binding Model}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,20,0,0" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="366" FontSize="26.667"/>
<TextBox x:Name="AddYear" Grid.Column="0" TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="321" FontSize="26.667" Visibility="Collapsed"/>
<TextBox x:Name="AddMake" Grid.Column="1" TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="425" FontSize="26.667" Visibility="Collapsed"/>
<TextBox x:Name="AddModel" Grid.Column="2" TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="366" FontSize="26.667" Visibility="Collapsed"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Is there anyway to get the items inside the DataTemplate?
Your problem is generic to all XAML flavors, same in WPF and Silverlight. The problem is your DataTemplate. Keep in mind that XAML will inject the contents of your DataTemplate once for each item in your list. That means your names can only exist within the scope of an instance of your DataTemplate.
If you have do code behind for your template, you might do better by creating a UserControl. See below for an example:
<!-- most boiler plate code skipped -->
<UserControl x:Class="MyProject.VehicleListItem">
<Grid x:Name="VehicleGrid" Height="52" Width="1117" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="318*"/>
<ColumnDefinition Width="425*"/>
<ColumnDefinition Width="366*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="Year" Grid.Column="0" TextWrapping="Wrap" Text="{Binding Year}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,20,0,0" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="321" FontSize="26.667"/>
<TextBlock x:Name="Make" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Make}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,20,0,0" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="425" FontSize="26.667" />
<TextBlock x:Name="Model" Grid.Column="2" TextWrapping="Wrap" Text="{Binding Model}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,20,0,0" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="366" FontSize="26.667"/>
<TextBox x:Name="AddYear" Grid.Column="0" TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="321" FontSize="26.667" Visibility="Collapsed"/>
<TextBox x:Name="AddMake" Grid.Column="1" TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="425" FontSize="26.667" Visibility="Collapsed"/>
<TextBox x:Name="AddModel" Grid.Column="2" TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="366" FontSize="26.667" Visibility="Collapsed"/>
</Grid>
</UserControl>
That let's you do everything you need to do from a UserControl that can be instantiated, has it's own code behind, etc. You can get that working exactly how you want, and then reference it when you need it in your list like this:
<ListView x:Name="VehicleList" HorizontalAlignment="Center" Height="120" Margin="0" VerticalAlignment="Center" Width="1119" Background="{ThemeResource CheckBoxDisabledForegroundThemeBrush}" SelectionChanged="VehicleList_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<myProject:VehicleListItem/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The ListView will assign a vehicle item to the DataContext of your user control and everything will work just like you designed it to.
There is a way to get at the visual tree in code behind but it is very convoluted. Essentially you need to use the ListView.ItemContainerGenerator and call ContainerFromItem(dataItem) (ref) and then walk down the visual tree you get from that. It's not only a serious pain to do, there's no guarantee all of the API will be accessible from WPF to UWP or SilverLight. The cleanest solution is to break up the code into independent pieces.
Another solution, which probably is even more clean that what I proposed is to take advantage of your bound objects. ListView.SelectedItem returns your object that is bound to the DataTemplate. Just get the values from that object. If you have a ViewModel that includes properties for AddYear, AddMake, and AddModel then it makes a lot of the work easier to do since you aren't dealing with XAML at all.
If it's okay for you to do this on a button-click; you could use the CommandParameter or traverse the VisualTree like these two links suggest:
How to get text from TextBox inside ListViewItem's DataTemplate
How to get the value out of a textbox in XAML?
UserControl
It sounds like a UserControl is what you are looking for.
Project → Add UserControl
It should be easy since you already have the XAML design. The code behind will look something like this:
public class VehicleView : UserControl
{
// Year
public static readonly DependencyProperty YearProperty =
DependencyProperty.Register("Year", typeof(int), typeof(VehicleView),
new PropertyMetadata());
public int Year
{
get { return (int)GetValue(YearProperty); }
set { SetValue(YearProperty, value); }
}
// Make
public static readonly DependencyProperty MakeProperty =
DependencyProperty.Register("Make", typeof(string), typeof(VehicleView),
new PropertyMetadata("None"));
public string Make
{
get { return (string)GetValue(MakeProperty); }
set { SetValue(MakeProperty, value); }
}
// Model
public static readonly DependencyProperty ModelProperty =
DependencyProperty.Register("Model", typeof(string), typeof(VehicleView),
new PropertyMetadata("None"));
public string Model
{
get { return (string)GetValue(ModelProperty); }
set { SetValue(ModelProperty, value); }
}
public VehicleView()
{
InitializeComponent();
}
}
Binding words the same way. Just name the UserControl with x:Name. Something like:
<UserControl x:Name="vehicleview"
x:Class="MyProjectClass"
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">
<Grid>
<!-- Here's where your ListView goes. -->
<TextBox Text="{Binding ElementName=vehicleview, Path=Model}"/>
<Grid>
</UserControl>
As i can see you have used bindings.
On VehicleList_SelectionChanged you can do the following
List<YouClass-Model> selectedItems = VehicleList.SelectedItems.Cast<YouClass-Model>().ToList();
or if you use ItemClicked EventHandler
YouClass-Model itemClicked = (YouClass-Model)e.ClickedItem)
That way you can load the binded data. ex itemClicked.Model
Also make sure that you binded your data correctly
Data binding overview
INotifyPropertyChanged.PropertyChanged
To get the UI control from the index or data, use listView.ContainerFromIndex or listView.ContainerFromItem. This is the accepted way in UWP.
try this code:
private void myListView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
ListItemData data = args.Item as ListItemData;
ListViewItem a = args.ItemContainer as ListViewItem;
var b = a.ContentTemplateRoot as Grid;
var txtBlock =b.FindName("txtTitle") as TextBlock;
txtBlock.Text = data.Title;
TextRange textRange = new TextRange()
{
StartIndex = 1,
Length = 3
};
TextHighlighter highlighter = new TextHighlighter()
{
Background = new SolidColorBrush(Colors.Yellow),
Ranges = { textRange }
};
txtBlock.TextHighlighters.Add(highlighter);
}
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.
**<controls:PanoramaItem Header="first item">
<!--Double line list with text wrapping-->
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="150">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="Name" Text="Name: " TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Margin="5,0,0,0"/>
</StackPanel>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock Text="{Binding LineThree}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock Text="{Binding LineFour}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>**
This is .xmal Part. but I have to do this in c#.Then Please Help me how i am do this.
ListBox listBox = new ListBox();
listBox.Margin = new Thickness(0, 0, -12, 0);
listBox.SetBinding(ListBox.ItemsSourceProperty, new Binding("Items"))
CreateItemTemplate(listBox);
PanoramaItem pi = new PanoramaItem();
pi.Header = "first item";
pi.Content = listBox;
When implementing CreateItemTemplate you have two choices, either create the DataTemplate programmatically or create it in a ResourceDictionary as a resource and use that resource. The latter is by far the easiest and best way to do it.
To do it programatically see How to define a DataTemplate in code?
To use a resource you can something like this
public void CreateItemTemplate(ListBox listBox)
{
object myDataTemplate = FindResource("myDataTemplateResource"); // This only works if the resource is available in the scope of your control. E.g. is defined in MyControl.Resources
listBox.SetResourceReference(ListBox.ItemTemplateProperty, myDataTemplate);
}
I have something like this:
<ListBox Height="456" Margin="30,113,0,0" x:Name="listBox1" Width="446" Background="Black">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28" Orientation="Horizontal">
<TextBlock Text="{Binding name}" FontSize="28" Padding="10" >
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener
Hold="GestureListenerHold" />
</toolkit:GestureService.GestureListener>
</TextBlock>
<TextBlock Text="{Binding id}" FontSize="24" Padding="10" >
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener
Hold="GestureListenerHold" />
</toolkit:GestureService.GestureListener>
</TextBlock>
<TextBlock Text="{Binding status}" FontSize="24" Padding="10">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener
Hold="GestureListenerHold" />
</toolkit:GestureService.GestureListener>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and in my app i do:
data = (List<Device>)serializer.Deserialize(stream);
this.listBox1.ItemsSource = data;
on every textblock I have a gesture listener which should provide the user with the option to change 'name', so when they hold the textblock the app navigates him to another page where he fills in the form.
My question is how to find the texblock which is binding 'name' when I click and hold another texblock?
You could use Linq-to-VisualTree, a utility which I wrote which allows you to navigate the visual tree:
http://www.scottlogic.co.uk/blog/colin/2010/03/linq-to-visual-tree/
Firstly, name the TextBlock so that it can be uniquely identified:
<TextBlock x:Name="NameText" Text="{Binding name}" FontSize="28" Padding="10" />
Then, when one of your other TextBlocks is tapped, you can find it as follows:
// locate the parent stackpanel
var parentStackPanel = tappedTextBlock.Ancestors().First()
// locate the names TextBlock
var nameTextBlock = parentStackPanel.Elements()
.Where(el => el.Name == "NameText").Single();
Cast the sender in the GestureListenerHold method.