how (and where) do I get actual ColumnDefinition Width="*" - xaml

Short version of what I'm trying to accomplish.
Have a scrollable grid with a button.
Once button is pressed inject two buttons to the right of the existing row content and scroll the content horizontally to the left so that the right edge of the second button injected into the layout is aligned with the right edge of the screen.
Longer version describing the solution tried and the problems encountered:
I have a custom control (grid inside a scrollview) for a row in ListView.
Normally that grid is the same width as the device.
The star of the show is
< ColumnDefinition Width="*" x:Name="Star"/>
<Label Grid.Row="2" Grid.Column="3" Text="{Binding FacebookId}" x:Name="IDLabel"
Style="{StaticResource SmallLabelStyle}"
HorizontalOptions="Fill"
VerticalOptions="StartAndExpand" BackgroundColor="Red"
/> is assigned to that column later on in xaml
last two columns in the grid for delete and block buttons are initially zero width
<ColumnDefinition Width="0" x:Name="cdDelete"/>
<ColumnDefinition Width="0" x:Name="cdBlock"/>
and, hence, not shown (to have the * column hosting the label to be sized properly, because, besides the label, there is a thumbnail, a button and spacing columns present in the grid)
prior to those two there is a column for a button that changes the
columns width and scroll the expanded grid within the scrollview.
So I need some way to replace the gridLength for ColumnDefinition "*"
with the actual Width of that column for the device I run on.
this.cdBlock.Width = this.cdDelete.Width = Metrics.ThumbnailDiameter;
if (starwidth <= 0)
{
starwidth = this.IDLabel.Width;
^^^^^^^^^^^^^^^^^^^^^^^^^ problem is here: this returns the width the label fits into, not the actual width of the label highlighted (see red background above)
}
this.Star.Width = new GridLength(starwidth);
any suggestions how to deal with this?
Thanks.

It seems that ViewCell.ContextActions can be used to leverage
the platform table editing functionality
Which means the button exposing delete/block buttons would have to go
unless there is a way to show buttons for contextactions programmatically

Related

How to put GridView on a multiple row/column Grid?

I have a GridView(each contains a image and a text), which uses DataTemplate. And my Grid is divided into 30 grid-rows and 40 grid-columns via codes like below. I attached a picture to show my case, please check it.
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
There is total 25 GridView items (image + text for each), depends on the binding data. And I need to put these 25 items onto 3 rows, e.g. each item will occupy 5 grid-rows and 4 grid-columns.
My question is:
(1)how to specify location of each GridView item?
Below code will make all the GridView items occupy the whole App Layout, but do not make it align as I want.
(2)The whole layout should support scroll horizontally. That is, when swipe the layout to left, the new icons(image+text) hidden on the right side will be shown.
How to achieve it?
<GridView ItemsSource="{x:Bind Skills}"
IsItemClickEnabled="True"
ItemClick="GridView_ItemClick"
ItemTemplate="{StaticResource SkillDataTemplate}"
Grid.Row="0" Grid.RowSpan="30" Grid.Column="0" Grid.ColumnSpan="40"
>
</GridView>

How do I get default ComboBox behavior in a DataGridTemplate column?

In my RadDataGrid, I have to use a DataGridTemplateColumn because the Itemssource of my combobox is a collection that is a property of the object represented by the grid row. I've got it working except for the fact that the combo box is always editable. In other words, the box and dropdown arrow are always visible. In the screen shot below, the first column is a DataGridComboBoxColumn. The second is a DataGridTemplateColumn. Neither column has been clicked. (Note the column headings are not in the shot.)
In a regular combobox column on a RadDataGrid the combo box is not visible unless you double click on the column. Until you click, the column just displays the selected item. In my columns, the box and dropdown arrow are always visible, before and after you click in or out of the column.
How can I change this to the typical behavior? I want the user to have to click in the column before the box and dropdown arrow become visible. Before that, the column just display the selected item. Here is my code:
<tg:DataGridTemplateColumn SizeMode="Auto">
<tg:DataGridTemplateColumn.CellContentTemplate>
<DataTemplate>
<ComboBox Width="220"
ItemsSource="{Binding Path=ItemCategory.Items, Mode=OneWay}"
SelectedItem="{Binding Products, Mode=TwoWay}"
SelectedValue="{Binding Products.Id, Mode=OneWay}"
SelectedValuePath="Id"
DisplayMemberPath="ItemName">
</ComboBox>
</DataTemplate>
</tg:DataGridTemplateColumn.CellContentTemplate>
<tg:DataGridTemplateColumn.Header>
<TextBlock.Text = "Item Category"/>
</tg:DataGridTemplateColumn.Header>
</tg:DataGridTemplateColumn>

Visibility converter based on another element width

I have a Silverlight application and I use MVVM.
I would like to display or hide a TextBlock, based on another element current width (or window width at least...). The problem is that I currently have 2 texts on each other if I reduce the width of my window so I need want to hide the second textblock in that case...
I'm a beginner and I know how to use a VisibilityConverter with a boolean from my ViewModel, but not like this...
To bind to a property of another element, you would do something like this:
Visibility="{Binding ActualWidth,
ElementName=TheThingWhoseWidthYouAreBindingTo,
Converter={StaticResource WidthToVisibilityConverter}}"
And then create yourself a WidthToVisibilityConverter that takes the width value and returns a Visibility value.

Datbinding element in list to an item outside of the list

I'm using XAML for a windows phone apps, and I'm binding a collection to graph control within the listbox Itemtemplate. Everything shows correctly except that the Horizontal axis is scaled per the data in the grid and I want them all scaled the same.
I've worked out the Maximum value - which need to establish the data binding - as its in a listbox itemtemplate I can't simply set the value in code. And for the data binding I only seem to see the elements in the collection but the value I have is not an element of the collection.
Is it possible to bind to a property/field of the page - that way I can set the value and all the grids can just bind to this property/fields.
One possible way to bind element inside ListBox item template to property of the page is by using ElementName binding. Simply name the page, then you can set binding source by page name, for example :
<phone:PhoneApplicationPage
..........
..........
x:Name="myPage">
<Grid x:Name="LayoutRoot" Background="Transparent">
<TextBlock Text="{Binding ElementName=myPage, Path=Name}" />
</Grid>
</phone:PhoneApplicationPage>
Above sample will display text "myPage" in the TextBlock. That way of binding also works for elements inside DataTemplate for ListBox item.

How to show a grid view inside a grid view?

I am developing a windows 8 app. And I want to display a GridView inside of another GridView item template. And I have added a visibility binding to the inner GridView, but the binding doesn't work when wrapping the GridViewItems in the outer GridView. It works when i use a simple ListView or GridView without any wrapping.
This is the main GridView with wrapping
<GridView
Name="feedGridView"
Background="Transparent"
SelectionMode="None"
ItemTemplate="{StaticResource MyFeedGridView}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Height="600" Orientation="Vertical" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
The style for "MyFeedGridView" which contains another GridView
<DataTemplate x:Key="MyFeedGridView">
<Grid HorizontalAlignment="Left" Width="500">
<StackPanel x:Name="gridViewStackPanel" Orientation="Horizontal" >
<GridView
HorizontalAlignment="Right"
x:Name="myFeedGridViewInListView"
ItemTemplate="{StaticResource MyFeedGridViewInListView}"
ItemsSource="{Binding listContent}"
Height="100"
Visibility="{Binding listContent,Converter={StaticResource FeedListToVisibilityConverter}}"
SelectionMode="None"
Width="400" />
</StackPanel>
</Grid>
</DataTemplate>
I am using a converter to hide or show the inner GridView. The below is the converter that i am using
public object Convert(object value, Type targetType, object parameter, string language)
{
List<ContentList> contents = value as List<ContentList>;
return (contents != null && contents.Count > 0) ? Visibility.Visible : Visibility.Collapsed;
}
My problem is that the inner GridView gets hidden for all the items or gets visible for all the items irrespective of the listcontent that I have bound.
I have noticed is that this is happening only when I set the ItemsPanel. If I remove the VariableSizedWrapGrid property then it's working as expected. But I need to wrap the items after each column so I can't do away with it.
Please let me know if you have any clue why this is happening.
Thanks
EDIT:
Attaching image of how the grid view items should be arranged. If you see the first item of the grid view, it has another grid view inside the grid view item representing songs. So this inner grid view will be empty for some items and populated for some. So I had written a visibility converter to show and hide the inner grid view. And when am using the converter,if the first grid view item has inner grid view items(songs then it will show inner grid view for all the items and if the first grid view item doesnt have any inner grid view items(songs) then it hides inner grid view for all the main grid view items.
Let me know if its not clear.
The problem with a GridView is that it uses the same size for all its GridViewItems by default. You can use a VariableSizedWrapGrid as its ItemsPanel, but that will disable virtualization and so you won't be able to use your GridView with a large number of items (more than a few dozen) without incurring performance cost.
For your scenario you could use a GridView with a non-uniform ItemsSource - one where some items represent the main list item and some that represent lists of songs and use the ItemTemplateSelector to specify which template to use for which type of item. It's not ideal of course, but this is what your easiest option is. One problem is that some of these song lists might end up orphaned in a different column than the item they are associated with, so for the ugly workaround you might need to figure out the number of items per column and in the list also include empty items or rearrange the items so that the empty-end-of-column items are filled with items that don't have any song lists associated with them.
A better option might be to use a VariableSizedWrapGrid as ItemsSource or simply use a manually populated Grid and add a more... item at the end that opens a ListView, since vertical lists IMHO are easier to scroll than horizontal GridViews. You would still need to use a non-uniform ItemsSource and ItemTemplateSelector to get the desired layout and keep virtualization of the list, but that's what you get.