How to show 1 value from 2 values in combobox xaml? - xaml

Hi I have a ComboBox with show 2 values name and code I want that when I press the drop down
in the ComboBox show the 2 values but when I select from the drop down I want the code
only return to combo box
then the name return in other TextBox.
<ComboBox ItemsSource="{Binding StoreList,Mode=TwoWay}"
VerticalAlignment="Center"
Grid.Column="1"
Name="ItemAutoComplete"
SelectedItem="{Binding TransactionHeader.StorePerRow,Mode=TwoWay}"
Margin="0,0,105,6"
Grid.ColumnSpan="3"
IsEnabled="{Binding TransactionHeader.inter, Mode=TwoWay }"
SelectedValue="iserial"
Grid.Row="2"
Height="44">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel>
<TextBlock Text="{Binding ENAME}"></TextBlock>
<TextBlock Text="{Binding code}"></TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
I want to return the ename in text box
and show the code only when I choose from list

Bind the Text-Property of TextBox to the SelectedItem of your ComboBox like so
<TextBox Text={Binding SelectedItem.ENAME, ElementName=ItemAutoComplete}/>
This will display the value of the property ENAME of the Item that is selected in your ComboBox.

Related

SOLVED Pressing on ScrollViewer inside ListBox Item doesn't select the Item

I gave a ListBox that lists items. The items, can vary in size, but follow the same pattern:
picture................Metadata
ID
<ListBox Name="View" Grid.Row="2" ItemsSource="{Binding Human, ElementName=uc}"
SelectedItem="{Binding SelectedHuman, ElementName=uc}"
MouseDoubleClick="OnSubjectEditClick"
VerticalContentAlignment="Center"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.ScrollUnit="Pixel"
ScrollViewer.CanContentScroll="True"
Grid.IsSharedSizeScope="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate >
<DataTemplate >
<Border BorderBrush="#565656" BorderThickness="1" Margin="10" Padding="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="300" />
<RowDefinition MaxHeight="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" MinWidth="300" MaxWidth="500" SharedSizeGroup="col1"/>
<ColumnDefinition MaxWidth="500" Width="*" SharedSizeGroup="col2"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" MaxHeight="300" MaxWidth="300" Source="{Binding Thumb}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Name}" FontWeight="Bold" TextAlignment="Center"/>
<local:MetadataView Grid.Column="1" Grid.RowSpan="2" Metadata="{Binding Metadata}" HorizontalAlignment="Stretch" VerticalAlignment="Center" IsEdit="False" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The items inside Metadata .xaml looks like this. StackPanels containing actual Metadata are automatically generated by code inside "DisplayMode":
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
...........
<StackPanel/> //AutoGenerated
............
</StackPanel>
</ScrollViewer>
</Grid>
The problem I'm facing is the fact, that I need to be able to select an item inside the ListBox. But, by adding ScrollViewer in Metadata.xaml it seems I Reroute the selector, so it is trying to select an item in Metadata ScrollViewer instead of ListBox when I press the part of the ListBox containing Metadata. If I press on Thumbnail, or even RightClick on any part of the ListBox - it seems to select just fine.
[SOLVED] After playing around with available options in ScrollViewer I stumbled across Focusable. Setting it to False did the trick.
I hope it will help someone in the future.
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" Focusable="False" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
</StackPanel>
</ScrollViewer>
</Grid>

Adding a counter to a DataTemplate

I have a DataTemplate for an ItemsControl that outputs a Grid with some binded controls, and this works as expected.
However, I want the first column of the Grid to output a counter of each Grid made.
For example...
<DataTemplate x:Key="myDataTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<TextBlock Text="X" /> <!-- I want a counter to go here -->
<TextBox Grid.Column="1" Text="{Binding Path=Name}" />
</Grid>
</DataTemplate>
I want that first TextBlock to display 1, 2, 3, 4, etc... as the DataTemplate outputs new Grids.
Any ideas on the best way to do that?
Thanks!
You can achieve this using AlternationCount and AlternationIndex of ItemsControl. Like,
<ItemsControl ItemsSource="{Binding Items}" AlternationCount="{Binding Items.Count}">
<ItemsControl.ItemTemplate>
<DataTemplate x:Key="myDataTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource TemplatedParent}}" />
<TextBox Grid.Column="1" Text="{Binding Path=Name}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This will give you 0 based index; you can use IValueConverter if any changes needed.

Show Button if GridViewItem is selected

I have WinRT application with following GridView:
<GridView x:Name="RouteGrid"
ItemsSource="{Binding Routes}"
SelectedItem="{Binding SelectedRoute,
UpdateSourceTrigger=PropertyChanged,
Mode=TwoWay}"
SelectionMode="Single">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Width="300" Margin="4">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock FontWeight="Bold" Text="{Binding TermText}" />
<TextBlock Grid.Column="1" Text="{Binding ConnectionObjects.Count}" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
I want to show a button instead of the second textblock when ever the item is selected because I want to allow my users to navigate to another view when they've selected.
I would like to do it in pure XAML because that is for me the cleanest way but I have no idea how to bind to the IsSelected property of the GridViewItem.
In WPF I would bind the Visibility property of the TextBlock and the button with a BooleanToVisibilityConverter and RelativeSource to the AncestorType GridViewItem and its property but that's not working because WinRT does not know AncestorType :(
Thanks for help.

windows phone 8 longlistselector loop through all childs

In my app, i have a longlistselector and i set the "DataContext = list" in the event PhoneApplicationPage_Loaded. Inside this longlistselector, i have this code:
<DataTemplate>
<StackPanel Margin="5,10" >
<Border BorderThickness="1" CornerRadius="5">
<Grid Margin="10,8" Tap="Grid_Tap_1" x:Name="gridPasta" Tag="{Binding Id_pasta}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<TextBlock Foreground="Black" HorizontalAlignment="Stretch" Text="{Binding Nm_pasta}" Grid.Column="0" TextWrapping="Wrap" VerticalAlignment="Top" TextTrimming="WordEllipsis" FontSize="24"/>
<Border Background="#E3F4FF" Grid.Column="1" CornerRadius="100">
<TextBlock Foreground="Black" Text="{Binding Qtde_pasta}" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="20"/>
</Border>
</Grid>
</Border>
</StackPanel>
</DataTemplate>
I want to set the background color of the specific Grid after i fill the LLS. I have search on internet about access LLS childs, but, nothing works. i have tried this link (Loop through longlistselector to get checkbox in itemtemplate), but the "SearchElement" not find the specific Grid.
My question is, how can i access this specific Grid after i fill the LLS?
Note: The specific Grid is known comparing the "Id_pasta" of the Grid.
Thanks for help.
You could add simple bool property (and implement PropertyChanged) to the class you're using for this datatemplate, bind it as background to the grid and use converter to convert it to desired backgroundcolor if true or false.

WinRT hardcoded ListViewItem vs. DataTemplate, why do they not look/work the same?

I'm new to WinRT so apologies if this is a silly question. I've created the following ListView:
<ListView x:Name="MyListView1"
Grid.Row="1"
Margin="120,300,0,0"
Width="500"
HorizontalAlignment="Left">
<ListViewItem Background="DodgerBlue">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<TextBlock Text="hardcoded value 1" Grid.Column="0"></TextBlock>
<TextBlock Text="hardcoded value 2" Grid.Column="1"></TextBlock>
</Grid>
</ListViewItem>
</ListView>
This looks the way I want it to look, and if you click an item it will select the whole row. However, if I move this into a DataTemplate it doesn't look the same, and you can no longer click the whole row. (If I add an ItemContainerStyle with the target type ListViewItem and set the background to yellow, it will fill it up so it's the same size as the hardcoded ListItem, but you can only click the yellow outline to select it.) This is the code:
<ListView x:Name="MyListView2"
ItemTemplate="{StaticResource MyTemplate}"
ItemsSource="{Binding MyData}"
Grid.Row="1"
Margin="120,0,0,0"
Width="500"
HorizontalAlignment="Left">
</ListView>
And in StandardStyles.xaml:
<DataTemplate x:Key="MyTemplate">
<ListViewItem Background="DodgerBlue">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding MyDataOne}" Grid.Column="0"></TextBlock>
<TextBlock Text="{Binding MyDataTwo}" Grid.Column="1"></TextBlock>
</Grid>
</ListViewItem>
</DataTemplate>
I don't understand why they don't look/work the same - shouldn't it get populated with the exact same code when you bind it? What do I need to do to make it work?
The problem there is the way you created the datatemplate. Remember that ListViewItem is a wrapper added to any object that needs to be displayed in the list, so when you create a datatemplate that contains a listviewitem you are basically wrapping the object twice. All you need to do is remove the listviewitem element from the datatemplate
<DataTemplate x:Key="MyTemplate">
<Grid Background="DodgerBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding MyDataOne}" Grid.Column="0"></TextBlock>
<TextBlock Text="{Binding MyDataTwo}" Grid.Column="1"></TextBlock>
</Grid></DataTemplate>