How to fix Binding TextBlock in WPF MVVM? - wpf

You see my XAML code at the bottom; when I debug it in the runtime, I see nothing in two TextBlocks of the StackPanel of my window, whereas there is some data in the binding TextBlocks when it is running!
Why can I see nothing in those TextBlocks?
<Grid Name="SchoolGridView"
AutomationProperties.AutomationId="SchoolGridView"
AutomationProperties.Name="School Group" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" Height="Auto" x:Name="List"
HorizontalContentAlignment="Center" ItemsSource="{Binding
PeopleList}" SelectionMode="Single">
...
</ListView>
<StackPanel Background="LightGray" Height="60"
Orientation="Horizontal" VerticalAlignment="Bottom" Grid.Row="1"
Visibility="{Binding
IsDetailVisible,UpdateSourceTrigger=PropertyChanged}">
<StackPanel HorizontalAlignment="Left" Width="320">
<TextBlock Height="20" Text="asaasdasd"></TextBlock>
<TextBlock Height="20" HorizontalAlignment="Left"
Background="Yellow" Text="{Binding DataContext.FullName,
UpdateSourceTrigger=PropertyChanged}"/>
<TextBlock Height="20" HorizontalAlignment="Left"
Background="Yellow" Text="{Binding
DataContext.RowSelectedItem,
UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>
<WrapPanel HorizontalAlignment="Right">
<Button Content="DELETE" HorizontalAlignment="Right"
VerticalAlignment="Top"
Width="auto" Height="50" Margin="3" Command="
{Binding DataContext.DeleteCommand, ElementName=List}"
CommandParameter="{Binding SelectedItem,
ElementName=List}"/>
</WrapPanel>
</StackPanel>
</Grid>
</Window>

You must fill DataContext
<Window x:Class="SampleApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SampleApplication"
Title="MainWindow" Height="350" Width="525">
Or set it in Code
DataContext = new ViewModel();

Related

How to apply theme effect on complete application in wpf c# when select perticular control

Hello friend i have created wpf theme in which i place buttons so my questions is when i click the particular button the complete application color should change below is my code behind and xaml.
<UserControl x:Class="Alyex.Exchange.UserControls.UCUserThemes"
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:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
xmlns:dxp="http://schemas.devexpress.com/winfx/2008/xaml/printing"
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
xmlns:dxga="http://schemas.devexpress.com/winfx/2008/xaml/gauges"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:dxthm="clr-namespace:DevExpress.Xpf.Utils.Themes;assembly=DevExpress.Xpf.Core.v14.2"
xmlns:common="clr-namespace:Alyex.Common;assembly=Alyex.Common"
xmlns:commonUIHelpers="clr-namespace:Alyex.CommonUI.UIHelpers;assembly=Alyex.CommonUI"
xmlns:commonResource="clr-namespace:Alyex.Common.Resources;assembly=Alyex.Common"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="900" ToolTip="WindowsTransparency">
<UserControl.Resources>
<common:DebugConverter x:Key="debugConverter"/>
<common:LanguagetoHorizontalContentAligmentConverter x:Key="ContentAlignmentConverter"/>
<common:AllowInsertToNewNodeVisibilityConverter x:Key="newNodeVisibilityConverter"/>
<common:BoolToStatusConverter x:Key="boolToStatusConverter"/>
<DataTemplate x:Key="toolbarCustomization">
<dxb:BarManagerActionContainer>
<!--Remove Export Button-->
<dxb:RemoveBarItemAndLinkAction ItemName="export" />
<!--Remove Email Sending Button-->
<dxb:RemoveBarItemAndLinkAction ItemName="email" />
<!--Remove Save Button-->
<dxb:RemoveBarItemAndLinkAction ItemName="save" />
</dxb:BarManagerActionContainer>
</DataTemplate>
<DataTemplate x:Key="PageHeader" >
<DockPanel>
<StackPanel Orientation="Vertical">
<dxe:ImageEdit x:Name="logo" HorizontalAlignment="Left"
Margin="0,0,0,1" BorderThickness="0"
VerticalAlignment="Top" IsPrintingMode="True"
HorizontalContentAlignment="Stretch"
CausesValidation="False"
Source="/Alyex.CommonUI;component/Images/Alx/ReportHeader.jpg"
Stretch="Fill"
Height="40"
Width="238"
/>
<dxe:TextEdit IsPrintingMode="True"
Text="{Binding Source={x:Static sys:DateTime.Now},Mode=OneWay, StringFormat='{}{0:dddd, dd-MMMM-yyyy hh:mm tt}'}"
dxp:ExportSettings.TargetType="Text"
Background="Transparent"
Margin="0,0,0,3"
></dxe:TextEdit>
</StackPanel>
<dxe:TextEdit Grid.Column="1" Grid.RowSpan="2"
EditValue="{Binding Content,Mode=OneWay}"
dxp:ExportSettings.TargetType="Text"
FontSize="25" FontWeight="ExtraBold"
Margin="10,0,0,1"
Background="Transparent"
HorizontalAlignment="Center"
MaxWidth="{Binding Path=UsablePageWidth, Mode=OneWay}"
/>
</DockPanel>
</DataTemplate>
<DataTemplate x:Key="PageFooter">
<dxe:TextEdit
HorizontalContentAlignment="Center"
Width="{Binding Path=UsablePageWidth, Mode=OneWay}"
dxp:ExportSettings.TargetType="PageNumber"
dxp:PageNumberExportSettings.Kind="NumberOfTotal"
dxp:PageNumberExportSettings.Format="Page {0} of {1}" />
</DataTemplate>
<DataTemplate x:Key="StatusIndicator">
<StackPanel Orientation="Horizontal">
<dxga:StateIndicatorControl x:Name="lampRecordStatusIndicator" StateIndex="{Binding Path=RowData.Row.IsActiveRecord}" Width="20" Height="20">
<dxga:StateIndicatorControl.Model>
<dxga:LampStateIndicatorModel />
</dxga:StateIndicatorControl.Model>
</dxga:StateIndicatorControl>
<TextBlock x:Name="txtBlkRecordStatus" VerticalAlignment="Center" Text="{Binding Path=RowData.Row.IsActiveRecord, Converter={StaticResource boolToStatusConverter}, Mode=OneWay}"></TextBlock>
</StackPanel>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="grdContainer" Margin="3,3,3,3">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<dxb:BarManager Name="barManager" CreateStandardLayout="True">
<dxd:DockLayoutManager x:Name="dockLayotManager" AllowDocumentSelector="False" Background="Transparent">
<dxd:LayoutGroup x:Name="layotGrp">
<dxd:DocumentGroup x:Name="docmntGrpUserThemes" ClosePageButtonShowMode="InAllTabPageHeaders"
ShowDropDownButton="False" CaptionLocation="Bottom" AllowFloat="False" AllowDrag="False">
<dxd:DocumentPanel x:Name="docmntPnlUserThemes" Caption="UserThemes"
AllowClose="False" AllowFloat="False" ToolTip="UserThemes"
AllowDrag="False">
<DockPanel>
<dxe:ListBoxEdit Name="lstboxwindowsTransparancy" Margin="10" SelectedIndexChanged="lstboxWindowsTransparency_SelectedIndexChanged"
ItemsSource="{Binding Source={x:Static dx:Theme.Themes},Mode=OneWay}">
<dxe:ListBoxEdit.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Height="{Binding (FrameworkElement.ActualHeight), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}" Orientation="Vertical" />
</ItemsPanelTemplate>
</dxe:ListBoxEdit.ItemsPanel>
<dxe:ListBoxEdit.ItemTemplate>
<DataTemplate>
<Button Width="130" Height="100">
<Button.Content>
<StackPanel>
<Image Source="{Binding SmallGlyph}" Width="40"/>
<AccessText TextWrapping="Wrap" Text="{Binding}" HorizontalAlignment="Center"></AccessText>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</dxe:ListBoxEdit.ItemTemplate>
</dxe:ListBoxEdit>
</DockPanel>
</dxd:DocumentPanel>
</dxd:DocumentGroup>
</dxd:LayoutGroup>
</dxd:DockLayoutManager>
</dxb:BarManager>
</Grid>
and this is my code behind
public partial class UCUserThemes : UserControl
{
public UCUserThemes()
{
InitializeComponent();
}
private void lstboxWindowsTransparency_SelectedIndexChanged(object sender, RoutedEventArgs e)
{
DXSplashScreen.Show<WaitDialogSSView>();
DevExpress.Xpf.Core.ThemeManager.ApplicationThemeName = DevExpress.Xpf.Core.Theme.Default.ToString();
ImageSource img = new BitmapImage(((DevExpress.Xpf.Core.Theme)lstboxwindowsTransparancy.SelectedItem).SmallGlyph);
ThemeManager.ApplicationThemeName = Theme.Office2010BlackFullName;
DXSplashScreen.Close();
}
}
}
ThemeManager.ApplicationThemeName= "Your Theme";

why aren't the buttons aligning horizontally in the stackpanel?

I have a list of buttons being generated from data, so there are a variable number of buttons. In an old version of the software I am overhauling, they used random custom controls but the result was that there was an infinitely growing horizontal scroller.
It appears I have the exact same XAML but it's not aligning each item horizontally, only vertically
<ScrollViewer Background="#33FFFFFF" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" >
<StackPanel Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding Events}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Margin="10" HorizontalAlignment="Stretch" Background="#FF1B1B1B" BorderThickness="5" BorderBrush="White" Command="{Binding Source={StaticResource Locator}, Path=EventSelector.ViewEventCommand}" CommandParameter="{Binding }">
<Grid Name="tileGridButton" Height="600" Width="400" Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="5*"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Name="tileImageBorder" Margin="5" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Center">
<Image Name="tileImage" Margin="0" Source="{Binding ImageURL}"/>
</Border>
<Grid Grid.Row="1" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="6*"></RowDefinition>
<RowDefinition Height="4*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Name="tileText" Margin="5" Foreground="White" TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" FontSize="30" FontWeight="Bold" Text="{Binding Title}" />
<TextBlock Grid.Row="1" Name="tileDescription" Margin="5" Foreground="White" TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" FontSize="25" FontWeight="Bold" Text="{Binding EventTimeBegin}" />
</Grid>
</Grid>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
First of all your StackPanel is pretty much useless because it only contains a single item, the ItemsControl.
Instead you need to change your ItemsControl so that it uses a StackPanel as its method of laying out items inside the ItemsControl...
<ItemsControl ...>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
<ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
.....

WPF Access grid items onClick

I'm new to wpf and have what I hope is a simple question.
I have created a simple template to display some grouped items
Currently when I click on one of the items ItemsClick is called (as expected)
private void itemGridView_ItemClick(object sender, ItemClickEventArgs e)
{
MyCustomClass selectedItem = (MyCustomClass)e.ClickedItem;
GridView g = (GridView)sender;
I can get a copy of the class object by casting e.ClickedItem and the grid from sender. But what I don't see is how to I get a reference to the custom items I added in the template for example if I wanted to change the text in the testName TextBlock ?
Template:
<DataTemplate x:Key="MyTestTemplate">
<Grid HorizontalAlignment="Left" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Grid.RowSpan="3">
<Image Source="{Binding ThumbnailUrl}" Stretch="Fill" Width="175" Height="175" />
</Border>
<Image Source="{Binding MyCustomImage}" Height="30" Width="30" Grid.RowSpan="3" Margin="0,0,0,30"/>
<Grid x:Name="ItemDetails" VerticalAlignment="Bottom" Height="75" Margin="0,0,0,2" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="testName" Text="{Binding Name}" Grid.Row="0" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" MaxWidth="100" MaxHeight="80" TextWrapping="Wrap" HorizontalAlignment="Left" Style="{StaticResource TitleTextStyle}" Margin="5,0,5,0"/>
<TextBlock Text="{Binding Address}" Grid.Row="0" HorizontalAlignment="Right" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource
CaptionTextStyle}" TextWrapping="NoWrap" Margin="5,0,5,0" />
</Grid>
</Grid>
</DataTemplate>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource MyTestTemplate}"
SelectionMode="None"
IsSwipeEnabled="True"
IsItemClickEnabled="True"
RightTapped="itemGridView_RightTapped"
ItemClick="itemGridView_ItemClick" SelectionChanged="itemGridView_SelectionChanged">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="Group Title"
>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding state}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
Ok I found the answer on msdn.
The link here http://msdn.microsoft.com/en-us/library/bb613579.aspx
The basic steps
get the selected item (I was responding to click so this info was easy), find the ContentPresenter within that Item, and then call FindName on the DataTemplate that is set on that ContentPresenter.

Silverlight complex binding

I've the page:
<view:PhoneApplicationPageBase
x:Class="Exadel.CCHMobile.View.NewsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:view="clr-namespace:Exadel.CCHMobile.View"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" Height="768" Width="480"
shell:SystemTray.IsVisible="True">
<view:PhoneApplicationPageBase.DataContext>
<Binding Path="News" Source="{StaticResource Locator}" />
</view:PhoneApplicationPageBase.DataContext>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<TextBlock Text="{Binding Path=TrackerTitle}" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
<ListBox Grid.Row="1" ItemsSource="{Binding Path=News}" VerticalAlignment="Stretch">
<DataTemplate>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Title}"/>
</DataTemplate>
</ListBox>
</Grid>
</view:PhoneApplicationPageBase>
My Model has property TrackerTitle, is binds ok. I have a News collection also in the model. I can't bind the Title property of News entity to the TextBlock. What is wrong?
Thank you.
Here
<ListBox Grid.Row="1" ItemsSource="{Binding Path=News}" VerticalAlignment="Stretch">
<DataTemplate>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Title}"/>
</DataTemplate>
</ListBox>
The DataTemplate is hanging in the mid-air. It should be inside ItemTemplate.
Also, is your collection ObservableCollection? or does it subscribes Property change notification ?

My WPF UserControl must never get wider than the containing ButtonBar

I have bound at top the Width of the UserControl to the Width of the ButtonGrid at top.
It does not work. I want my UserControl always that wide as the width of the ButtonGrid. The problem is loading documents with a long name > Sum(Width of 3 buttons) makes the UserControl as wide as the document name. Now imagine having document names with 100 chars or longer and you add documents the UserContol will bump and jump...
<UserControl x:Class="TBM.View.DocumentListView"
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:Behaviours="clr-namespace:FunctionalFun.UI.Behaviours"
xmlns:Helper="clr-namespace:TBM.Helper"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="300"
Width="{Binding ElementName=ButtonGrid,Path=Width}"
>
<UserControl.Resources>
<Helper:BooleanToVisibilityConverter x:Key="boolToVisibilityConverter" />
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListBox
SelectionMode="Extended"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling"
Behaviours:MultiSelectorBehaviours.SynchronizedSelectedItems="{Binding SelectedDocumentViewModelList,Mode=TwoWay}"
Width="Auto"
Focusable="True"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
Grid.Row="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Name="documentListBox"
BorderThickness="1"
ItemsSource="{Binding DocumentList}"
Visibility="{Binding ElementName=documentListBox,Path=HasItems, Converter={StaticResource boolToVisibilityConverter}}"
>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<!--<TextBlock Text="{Binding Path=Id}" />-->
<TextBlock Text="{Binding Path=DocumentName}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<UniformGrid x:Name="ButtonGrid"
Grid.Row="1"
Rows="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
>
<Button Command="{Binding Path=DeleteDocumentCommand}" HorizontalAlignment="Stretch" Content="Delete" />
<Button Command="{Binding Path=AddDocumentCommand}" HorizontalAlignment="Stretch" Content="Add" />
<Button Command="{Binding Path=OpenDocumentCommand}" HorizontalAlignment="Stretch" Content="Open" />
</UniformGrid>
</Grid>
</UserControl>
You could also set the width of the ParentGrid(containing the control) to a fixed size, en then horizontal alignment to Stretch
Try 2 stuff
Use horizontal alignment on user control to stretch
Set binding to MaxWidth same as Width binding

Resources