I'm following tutorial and noticed that Sample Data doesn't work in VS 2015 Blend as in 2013 Blend. In tutorial and probably all guides by Microsoft all they say is to drag-n-drop sample data collection on ListBox and data magically is there rendered, however for me that doesn't work, nothing changes visually. In properties there is ItemSource changed to sample data one, but that's pretty much it.
Here's my sample data
And here's current result of it
Full XAML of page
<Page
x:Class="TutorialApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TutorialApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{Binding Source={StaticResource CarData}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" >
<TextBlock Text="Car Voter" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Text="OverView" Style="{StaticResource SubheaderTextBlockStyle}" />
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1">
<ListBox ItemsSource="{Binding Collection}" SelectedIndex="-1" Background="#00FFFFFB" DataContext="{StaticResource CarData}"/>
</Grid>
</Grid>
Related
I have a problem with displaying the Russian language in the Win UI 3 application
Here is the MainWindow.xaml file
<Window
x:Class="test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:test"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="32" />
<RowDefinition />
</Grid.RowDefinitions>
<NavigationView
Grid.Row="1"
IsBackButtonVisible="Collapsed"
IsSettingsVisible="False">
<StackPanel x:Name="TitleBar" VerticalAlignment="Center">
<TextBlock Text="привет" />
<TextBox
Width="300"
Margin="8"
PlaceholderText="привет" />
<TextBox
Width="300"
Margin="8"
PlaceholderText="привет" />
</StackPanel>
</NavigationView>
</Grid>
</Window>
Actually, I'm not sure if the problem is in this file, but I have no other ideas
You can try to change the encoding of visual studio, or install the Force UTF-8 visual studio extension
I'm experiencing a problem with my UI XAML code. The problem is that I can't get my TextBox to fill in all available space in the Grid Row that contains it. I read quite a few posts about similar issues, and the summary of them is "don't use stack panel for this" and "set VerticalAlignment="Stretch"", but this did not work for me. Near the bottom of my XAML you can see the text box that I've been trying to get to stretch to fill the height of the grid row, along with the text box I'm hoping to have work by the end in a comment.
Having VerticalAlignment="Stretch" does not change the behavior of the XAML, and produces a one-line TextBox as if I didn't assign VerticalAlignment="Stretch" at all. This is what the GUI page looks like with or without VerticalAlignment="Stretch":
Here is the respective XAML code.
<ContentControl x:Class="Analytics.Configuration.UI.DataflowTemplateView"
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:ComputersUnlimited.Analytics.Configuration.UI"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:core="http://schemas.cu.net/2011/xaml/presentation/core"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
d:DataContext="{d:DesignInstance local:DataflowTemplateViewModel, IsDesignTimeCreatable=True}">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="Row0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Command="{Binding NavigateToPreviousControlCommand}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,0,20,0">Back</Button>
<TextBlock Grid.Column="1" Text="M-Code Template Text" FontSize="20" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
<!--<TextBox Grid.Row="1"
TextWrapping="Wrap"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,6,0,6"
AcceptsReturn="True"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"/>-->
<TextBox Grid.Row="1" VerticalAlignment="Stretch"/>
</Grid>
I've tried all the advice I've ran into with no success. So, if you have any advice, sharing would be appreciated.
Thank you.
Most likely there is an implicit style for TextBox that is setting a default Height. If that's the case, you'll need to set:
Height="NaN"
On your TextBox in order for it to stretch.
I'm developing UI for an application using WPF. I'm using command binding. Command works correctly when the button is put inside the Window. But when I put the button inside my UserControl the command parameter is null.
ViewModel code:
public RelayCommand<Window> MainCommand { get; private set; }
private void MainAction(Window window)
{
// here the parameter is null
if (window == null) return;
MainPage main = new MainPage();
main.Show();
window.Close();
}
The user control:
<UserControl x:Class="Kitchen.UI.View.HeaderFooter"
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:Kitchen.UI.View"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../Skins/MainSkin.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.Template>
<ControlTemplate TargetType="UserControl">
<Grid DataContext="{Binding DataContext, RelativeSource={RelativeSource TemplatedParent}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="1" Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<ContentControl Content="{TemplateBinding Content}"/>
</ScrollViewer>
<Image Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Source="{StaticResource HeaderImage}"
Margin="0 10 0 0" HorizontalAlignment="Stretch" SizeChanged="Image_SizeChanged" IsHitTestVisible="False"></Image>
<Image Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="3" Source="{StaticResource FooterImage}"
Margin="0 -1 0 10" HorizontalAlignment="Stretch" Height="Auto"></Image>
</Grid>
</ControlTemplate>
</UserControl.Template>
</UserControl>
The way I put the button inside the user control:
<Window xmlns:View="clr-namespace:Kitchen.UI.View" x:Class="Kitchen.UI.View.Order" Name="OWindow" ResizeMode="NoResize" WindowState="Maximized"
WindowStartupLocation="CenterOwner" WindowStyle="None "
Width="1600"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ignore="http://www.galasoft.ch/ignore"
mc:Ignorable="d ignore"
DataContext="{Binding Order, Source={StaticResource Locator}}">
<View:HeaderFooter x:Name="HeaderFooter">
<Button Grid.Row="1" Grid.Column="0"
Command="{Binding ShowExitCommand}"
CommandParameter="{Binding ElementName=OWindow}"
Style="{StaticResource ImageButtonStyle}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0" Source="{StaticResource ButtonBack}" Width="180" Grid.ColumnSpan="2" />
<TextBlock Grid.Column="1" Grid.Row="0" Text="مشاهده سفارشات خارج شده از صف" Style="{StaticResource ImageButtonTextBlockStyle}" FontSize="15"/>
</Grid>
</Button>
</View:HeaderFooter>
</Window>
Try with x:Reference instead of ElementName, this should bring language-level support for element reference resolution, which ElementName (that operates at the framework level) may not be able to resolve.
CommandParameter="{Binding Source={x:Reference OWindow}}"
To avoid a cyclic dependency, you have to reference something that is not the container of the user control itself, for example
<Grid >
<DataGrid Name="OWindow" Width="10" Height="10"/>
<local:HeaderFooter x:Name="HeaderFooter">
<Button Grid.Row="1" Grid.Column="0"
Command="{Binding ShowExitCommand}"
CommandParameter="{Binding Source={x:Reference OWindow} }"
> <!-- instead of ElementName=OWindow -->
Please note, the above example makes clear that my answer correctly resolves the issue in a consistent context, while the circular reference is just another issue of the original code to be fixed.
Finally I changed my way through the problem. I needed a template to be applied to several windows, so I used a UserControl and it was successful as a template unless I wanted to pass the reference of the containing window of the UserControl as a parameter to a command from within the content of the UserControl.
Now I'm applying a custom ControlTemplate to the Window and it's working now.
But I think this is a bug or at least an architectural weakness for WPF. When you use {Binding ElementName=OWindow} from within the Window itself or other Controls like Grid the reference is resolved and handled but if you use it inside the user defined user control it causes the null reference.
I think this is because they are capturing the parameter at the Window construction.
I'm new to XAML and I cant seem to figure this out. I want a two column page that is docked (in winforms term) to its container. The first column has a listbox and I want this to automatically show scrollbar when needed. I was able to do so but only if I set the Height or MaxHeight of the ListBox. My problem with that is the listbox wont grow in size anymore when the main windown/form is resized. What I want is to dock the listbox to the first column so it will resize when the form is resized and show a scrollbar when needed.
Here is the code the does not show a scrollbar:
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<ListBox x:Name="lstView"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Margin="10">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="20">
<TextBlock Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
Here is the code that shows a scrollbar but has a fixed height.
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<ListBox x:Name="lstView"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Height="200"
Margin="10">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="20">
<TextBlock Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
The problems with scroll bar visibility when using a StackPanel. I think it is because the StackPanel is always as big as it needs to be to contain all of its children. Try reorganizing the layout to remove the StackPanel (use a Grid instead) and see if that helps.
On MainWindow, I have an ItemsControl that I'm adding UserControls to, and said UserControl also contains an ItemsControl containing other UserControls.
The problem is that a lot of items in the second ItemsControl aren't showing because they go past the height of the UserControl as it appears on MainWindow.
How can I make sure the UserControls in the first ItemsControl always stretch enough to show all UserControls in their ItemsControl? For trial and error I tried stretching via a ItemTemplate but that didn't change a thing.
<Window x:Class="X.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate x:Key="DataTemplate1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ItemsPresenter Grid.Row="0" Grid.Column="0" DataContext="{Binding}"/>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ItemsControl Grid.Row="0" x:Name="ic" ItemTemplate="{DynamicResource DataTemplate1}"/>
</Grid>
</Window>
--
<UserControl x:Class="X.UserControl1"
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" Height="113" Width="209">
<UserControl.Resources>
<DataTemplate x:Key="DataTemplate1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ItemsPresenter DataContext="{Binding}"/>
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="Label" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
<ItemsControl Grid.Row="1" x:Name="ic" Margin="0,36,0,0" ItemTemplate="{DynamicResource DataTemplate1}"/>
</Grid>
</UserControl>
--
<UserControl x:Class="X.UserControl2"
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" Height="40" Width="64">
<Grid>
<Label Content="Label2" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
</Grid>
</UserControl>
Added from my above comment, which turned out to be the problem.
Your UserControls have Height and Width explicitly set, which means they won't automatically resize/stretch to accommodate the child controls as you desire.
Removing the Height (and ideally Width), should do the trick:
<UserControl x:Class="X.UserControl1"
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" />
<!-- Your Code -->
</UserControl>