Develop Reference

WPF Custom Control Not Displaying Data

Here I have my custom control:
xaml:
<UserControl x:Class="Tasks.Assets.Objects.Card"
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"
xmlns:local="clr-namespace:Tasks.Assets.Objects"
mc:Ignorable="d"
d:DesignHeight="200" d:DesignWidth="150">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="135"/>
<RowDefinition Height="5"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Rectangle Fill="{DynamicResource MutedWhite}" Grid.RowSpan="4" Grid.ColumnSpan="2"/>
<TextBlock x:Name="textBlock" Grid.Column="1" Text="{Binding Path=Title}" TextWrapping="Wrap" FontFamily="/Tasks;component/Assets/Fonts/#Abel" FontSize="24"/>
<Rectangle Fill="{DynamicResource MutedGrey}" Grid.Row="1" Grid.ColumnSpan="2"/>
</Grid>
C# Code Behind:
public partial class Card : UserControl
{
public Card()
{
InitializeComponent();
}
public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register("Title", typeof(string), typeof(Card), new UIPropertyMetadata(""));
}
and on MainWindow.xaml
<Objects:Card Grid.Column="1" Grid.Row="1" Title="Say Something Here"/>
The rectangles are rendering but my text is not rendering in the control
I have tested this by adding text without the binding which works fine. However the problem is at the binding. I want to have the ability to set the text object on main window through the use of a xaml tag but I cannot do this as it will not show me. Any help appreciated :)

The Text binding in the UserControl's XAML is missing a source object, which should be the UserControl instance.
One way to set the binding source to the UserControl instance is to set the RelativeSource property:
<TextBlock Text="{Binding Path=Title,
RelativeSource={RelativeSource AncestorType=UserControl}}" ... />
You may also set the x:Name attribute on the UserControl, and set the binding's ElementName:
<UserControl ... x:Name="self">
...
<TextBlock Text="{Binding Path=Title, ElementName=self}" ... />
...
</UserControl>

Two AutoCompleteBox controls in two different tabs in wpf

I have used two AutoCompleteBox controls in two different tabs in a wpf window.
Control in first tab is working fine. First Control
But the control in second tab, data is binding and I could see the matched strings in the dropdown list.
I couldn't select the items from the list using mouse or arrow keys. Second Control
When I moved the second control to new window, it is working fine.
I couldn't understand what is the actual issue?
Please find below code:
Autocompletebox in first tab
<ctrls:AutoCompleteBox Grid.Column="1" x:Name="txtFirst" VerticalAlignment="Center" Margin="0,0,0,10" />
Autocompletebox in Second tab
<ctrls:AutoCompleteBox Grid.Column="1" x:Name="txtSecond" VerticalAlignment="Center" Margin="0,0,0,10" />
Xaml code for Tab control
<TabControl Grid.Row="1"
x:Name="tabCtrl"
SelectionChanged="tabCtrl_SelectionChanged">
<TabItem x:Name="tab1"
Header="First">
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="500" />
</Grid.ColumnDefinitions>
<TextBlock Text="First"
VerticalAlignment="Center"
Margin="0,0,0,10" />
<ctrls:AutoCompleteBox Grid.Column="1"
x:Name="txtFirst"
VerticalAlignment="Center"
Margin="0,0,0,10" />
</Grid>
</ScrollViewer>
</TabItem>
<TabItem x:Name="tab2"
Header="Second">
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="500" />
</Grid.ColumnDefinitions>
<TextBlock Text="Second"
VerticalAlignment="Center"
Margin="0,0,0,10" />
<ctrls:AutoCompleteBox Grid.Column="1"
x:Name="txtSecond"
VerticalAlignment="Center"
Margin="0,0,0,10" />
</Grid>
</ScrollViewer>
</TabItem>
</TabControl>
And the code behind
var data = db.tblname.Select(c => c.propertyname).ToList();
txtFirst.ItemsSource = data;
var data1 = db.tblname.Select(c => c.propertyname).ToList();
txtSecond.ItemsSource = data1;

Your C# code is fine.
You should take a look at the XAML.
(Provide XAML to us as well.)

After thorough debugging of my code, I figured out that the issue was due to SelectionChanged event of TabControl.
Whenever I select an item from the Autocompletebox control, SelectionChanged event of TabControl was getting fired, which led to chaos, as my binding logic for Autocompletebox was in SelectionChanged event.
Still I am not getting why do my Autocompletebox control triggers SelectionChanged event of TabControl without the registeration of SelectionChanged event for Autocompletebox Control.
But Below code overcame the issue
private void tabCtrl_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.Source is TabControl)
{
// Business logic for binding autocompletebox
}
}
Thanks everyone for their support!

pivot page in windows phone 8 LoadedPivot event not firing?

i just started with generic forms for windows phone 8 development.
No i want to test if a certain pivotitem is selected, then it should fire a function to load a grid into that pivot item.
here is my xaml and my code so far
XAML:
<phone:Pivot Name="mainpivot" Title="MY APPLICATION" LoadingPivotItem="mainpivot_LoadingPivotItem" LoadedPivotItem="mainpivot_LoadedPivotItem_1">
<!--Pivot item one-->
<phone:PivotItem Name="staticpivot" Header="static">
<!--Double line list with text wrapping-->
<Grid Name="staticGrid" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox Name="txtUsername" Grid.Column="1" Height="70"></TextBox>
<TextBox Name="txtPassword" Grid.Row="1" Height="70" Grid.Column="1"></TextBox>
<TextBox Name="txtdescription" Grid.Row="2" Height="150" Grid.Column="1" TextWrapping="Wrap"></TextBox>
<TextBlock Height="40" Text="USERNAME" HorizontalAlignment="Center"></TextBlock>
<TextBlock Height="40" Text="PASSWORD" HorizontalAlignment="Center" Grid.Row="1"></TextBlock>
<TextBlock Height="40" Text="DESCRIPTION" HorizontalAlignment="Center" Grid.Row="2"></TextBlock>
<Button Grid.Row="4" Grid.ColumnSpan="2" Tap="Button_Tap">SAVE DATA</Button>
</Grid>
</phone:PivotItem>
<!--Pivot item two-->
<phone:PivotItem x:Name="genericpivot" Header="generic">
<!--Double line list no text wrapping-->
</phone:PivotItem>
</phone:Pivot>
as you can see the 2nd pivot has nothing in it, i am going to populate it dynamically with controls.
the problem is here in the code :
private void mainpivot_LoadedPivotItem_1(object sender, PivotItemEventArgs e)
{
if (e.Item.Name == "genericpivot")
{
loadDetailForPivot();
}
}
this function does not fire when i debug and put a breakpoint there.
can anyone tell my why? or give a link that explains it.
regards

To clarify, are you trying to populate the selected pivot item once it's selected?
I believe what you are after is picking up a change to the pivot controls selectedindex, such as (VB.net, sorry):
Private Sub PivotItem_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles PivotItem.SelectionChanged
If PivotItem.SelectedIndex = 1 Then LoadDetailForPivot
End Sub
However...why do you not load the controls beforehand? Wouldn't that be quicker (i.e. no delay while things are loaded as the user pivots). I did this on a previous app and the pivoting was jerky as a result.

ListView showing empty TextBlocks at runtime

I'm experiencing a strange problem with data-binding. In the designer everything is shown correctly, but at runtime my ListView just contains those TextBlocks with an empty string in them. I'm using MVVM light for ViewModels. Most of the code was generated by VS2012 by creating a split page for WindowsStore-Apps.
Here's my XAML: ( I already removed some other parts, like the VisualStateManager, but without effect so that doesn't seem to be an issue.)
<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="Kunden.OrderPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Kunden"
xmlns:common="using:Kunden.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
DataContext="{Binding SelectCustomersViewModel, Source={StaticResource Locator}}">
<Page.Resources>
<CollectionViewSource
x:Name="itemsViewSource"
Source="{Binding Items}"/>
</Page.Resources>
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="primaryColumn" Width="610"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="titlePanel">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button
x:Name="backButton"
Click="GoBack"
IsEnabled="{Binding DefaultViewModel.CanGoBack, ElementName=pageRoot}"
Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="Werbeauswahl" Style="{StaticResource PageHeaderTextStyle}" Margin="0,0,-2,40"/>
</Grid>
<!-- Elementliste mit vertikalem Bildlauf -->
<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemsListView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.Row="1"
Margin="-10,-10,0,0"
Padding="120,0,0,60"
IsSwipeEnabled="False"
SelectionChanged="ItemListView_SelectionChanged"
ItemsSource="{Binding AvaiableCountries}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
... closing brackets etc.
The IEnumerableI want to bind:
private IEnumerable<Country> avaiableCountries;
public IEnumerable<Country> AvaiableCountries
{
get { return avaiableCountries; }
set { avaiableCountries = value; RaisePropertyChanged(() => AvaiableCountries); }
}
The data value object CountryI need for my LINQ-Query:
public class Country
{
internal string Name { get; set; }
}

Please try try changing the access modifier of the Name property from internal to public and see whether that fixes your problem?
If that doesn't work post the code where you're populating AvaiableCountries with data

WPF ListView with buttons on each line

I have a list of Games which just has an ID, a Date, and a Time.
I am setting this list as the DataContext.
I then have a DataTemplate for these games that is:
<DataTemplate DataType="{x:Type loc:Game}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Name="dateBlock" Grid.Column="0" Grid.Row="1"
Text="{Binding Date, StringFormat=d}"></TextBlock>
<TextBlock Name="TimeBlock" Grid.Column="1" Grid.Row="1"
Text="{Binding Time}"></TextBlock>
//need to but a button here for each row
</Grid>
</DataTemplate>
To use the template, I am simply just doing this:
<ListBox ItemsSource="{Binding}"></ListBox>
I need to add a Button to each line in this list view that have the same click event, but will somehow pass the ID of the game for which button is being clicked.
How can I do this? I am stuck.
If it doesn't make sense let me know and I will try to explain better.

For the first part, add a Button to the DataTemplate and subscribe to the Click event
<DataTemplate DataType="{x:Type loc:Game}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Name="dateBlock" Grid.Column="0" Grid.Row="1" Text="{Binding Date, StringFormat=d}"></TextBlock>
<TextBlock Name="TimeBlock" Grid.Column="1" Grid.Row="1" Text="{Binding Time}"></TextBlock>
<Button Click="Button_Click">X</Button>
</Grid>
</DataTemplate>
In the code behind event handler, you can get the DataContext of the clicked Button and find out the Id like
private void Button_Click(object sender, RoutedEventArgs e)
{
Button button = sender as Button;
Game game = button.DataContext as Game;
int id = game.ID;
// ...
}

Easily. Add a Button to your DataTemplate, give it a Command and then set the CommandParameter="{Binding}". The DataContext within a DataTemplate is the object.
As requested, some links to using commands.
WPF Commands Part 1: Basics
WPF Commands Part 2: Command Bindings and Gestures
MSDN Understanding Routed Events and Commands In WPF (ADVANCED)
HTH,

With a ListBox.ItemTemplate. Then in your click event you can get the object via DataContext.
<ListBox.ItemTemplate>
<DataTemplate>
<Button Content="^" IsEnabled="{Binding Path=IsNotFirst, Mode=OneWay}"
Click="btnMoveFDAup"/>
</DataTemplate>
</ListBox.ItemTemplate>
private void btnMoveFDAup(object sender, RoutedEventArgs e)
{
Button btn = ((Button)sender);
// btn.DataContext will get you to the row object where you can retrieve the ID
}