I am playing around with WPF for the first time and i am tring to show / hide group objects on a test toolbar based on a toggle button.
The toolbar is created via a template in a resource dictionary and i cannot figure out how to get this working as it seems alot more of an issue compared to winforms.
Out of all the examples i have found they all seem to function if the item is not templated is there any way i can acheive this.
my code so far is below and the point of failure is on the login togglebutton as i have x:name reference and apparently i cannot do this as its part of a resource dictionary, so i am pretty stumped...
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:wpfApplication1">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/wpfApplication1;component/Resources/Styles/Shared.xaml"/>
<ResourceDictionary Source="pack://application:,,,/wpfApplication1;component/Resources/Styles/ToolBar.xaml"/>
</ResourceDictionary.MergedDictionaries>
<ToolBar x:Key="MyToolbar" Height="120">
<ToolBar.Resources>
<BooleanToVisibilityConverter x:Key="boolToVis"/>
</ToolBar.Resources>
<GroupBox x:Name="tBtn" Header="Login" Style="{StaticResource ToolbarGroup}" Margin="5,3,3,3">
<StackPanel Grid.Row="1" Orientation="Horizontal">
<!--Login-->
<ToggleButton Margin="3" Width="55" Style="{StaticResource ToolBarButtonBaseStyle}"
HorizontalContentAlignment="Center""
CommandTarget="{Binding ElementName=MyTestApp}">
<ToggleButton.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="4*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Image Source="pack://application:,,,/wpfApplication1;component/Resources/Images/Login.png" Width="45"/>
<TextBlock Grid.Row="1" Text="New" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
</Grid>
</ToggleButton.Content>
</ToggleButton>
</StackPanel>
</GroupBox>
<GroupBox Visibility="{Binding Path=IsChecked, ElementName=tBtn, Converter={StaticResource boolToVis}}" Header="File" Style="{StaticResource ToolbarGroup}" Margin="5,3,3,3">
<StackPanel Grid.Row="1" Orientation="Horizontal">
<!--File-->
<Button Margin="3" Width="55" Style="{StaticResource ToolBarButtonBaseStyle}"
HorizontalContentAlignment="Center"
Command="{x:Static ApplicationCommands.New}"
CommandTarget="{Binding ElementName=MyTestApp}">
<Button.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="4*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Image Source="pack://application:,,,/wpfApplication1;component/Resources/Images/GenericDocument.png" Width="45"/>
<TextBlock Grid.Row="1" Text="New" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
</Grid>
</Button.Content>
</Button>
<StackPanel Orientation="Vertical" Margin="0,2,0,2">
<Button Margin="1" Padding="2" HorizontalContentAlignment="Left"
Style="{StaticResource ToolBarButtonBaseStyle}"
Command="{x:Static ApplicationCommands.Open}"
CommandTarget="{Binding ElementName=MyTestApp}">
<Button.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="pack://application:,,,/wpfApplication1;component/Resources/Images/OpenFolder.png" Width="16"/>
<TextBlock Margin="3,0,3,0" Text="Open" VerticalAlignment="Center" Grid.Column="1"/>
</Grid>
</Button.Content>
</Button>
<Button Margin="1" Padding="2" HorizontalContentAlignment="Left"
Style="{StaticResource ToolBarButtonBaseStyle}"
Command="{x:Static ApplicationCommands.Save}"
CommandTarget="{Binding ElementName=MyTestApp}">
<Button.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="pack://application:,,,/wpfApplication1;component/Resources/Images/Save.png" Width="16"/>
<TextBlock Margin="3,0,3,0" Text="Save" VerticalAlignment="Center" Grid.Column="1"/>
</Grid>
</Button.Content>
</Button>
<Button Margin="1" Padding="2" HorizontalContentAlignment="Left"
Style="{StaticResource ToolBarButtonBaseStyle}"
Command="{x:Static ApplicationCommands.Print}"
CommandTarget="{Binding ElementName=MyTestApp}">
<Button.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="pack://application:,,,/wpfApplication1;component/Resources/Images/Print.png" Width="16"/>
<TextBlock Margin="3,0,3,0" Text="Print" VerticalAlignment="Center" Grid.Column="1"/>
</Grid>
</Button.Content>
</Button>
</StackPanel>
</StackPanel>
</GroupBox>
</ToolBar>
</ResourceDictionary>
Many thanks in advance for any assistance
now your GroupBox is called "tBtn" but that should be your ToggleButton. (as you are refering to its property IsChecked)
Try to name your ToggleButton tBtn and retry
Related
I want when click button then go to Location reserved or select in combobox. This example https://learn.microsoft.com/en-us/previous-versions/bing/wpf-control/hh830432(v=msdn.10) but i don't know code behind for ChangeMapView_Click or full code for xaml below. Another know code behind, maybe share with me. Thank you!
<Window x:Class="WPFTestApplication.SwitchMapViews"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
Width="1024" Height="768">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="40" />
<RowDefinition Height="20" />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<m:Map x:Name="myMap" CredentialsProvider="<strong>INSERT_YOUR_BING_MAPS_KEY</strong>"
Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" Padding="5"
Center="39.3683,-95.2734,0.0000" ZoomLevel="4.000" AnimationLevel="None" Mode="AerialWithLabels"/>
<StackPanel Orientation="Horizontal" Opacity="0.7" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center">
<Button x:Name="btnNorthAmerica" Click="ChangeMapView_Click" Tag="39.3683,-95.2734,0.0000 4.0000"
Margin="5">
<TextBlock>North America</TextBlock>
</Button>
<Button x:Name="btnNewYork" Click="ChangeMapView_Click" Tag="40.7199,-74.0030,0.0000 12.0000" Margin="5">
<TextBlock>New York</TextBlock>
</Button>
<Button x:Name="btnSanFrancisco" Click="ChangeMapView_Click" Tag="37.6801,-122.3395,0.0000 11.0000" Margin="5">
<TextBlock>San Francisco</TextBlock>
</Button>
<Button x:Name="btnVancouver" Click="ChangeMapView_Click" Tag="49.2765,-123.1030,0.0000 14.0000" Margin="5">
<TextBlock>Vancouver</TextBlock>
</Button>
<ComboBox SelectionChanged="AnimationLevel_SelectionChanged" SelectedIndex="1" Margin="10" Height="20">
<ComboBoxItem Content="None" />
<ComboBoxItem Content="Full" />
</ComboBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Opacity="0.9" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Center">
</StackPanel>
<StackPanel Orientation="Horizontal" Opacity="0.9" Grid.Column="0" Grid.Row="3" HorizontalAlignment="Center">
<TextBlock Text="Latitude: " Padding="5" Foreground="White"/>
<TextBox x:Name="txtLatitude" Text="" IsReadOnly="True" Background="LightGray"/>
<TextBlock Text="Longitude: " Padding="5" Foreground="White" />
<TextBox x:Name="txtLongitude" Text="" IsReadOnly="True" Background="LightGray"/>
</StackPanel>
</Grid>
In the textboxes from the code below, the blinking cursor doesn't show even after i click the textbox or when it has focus.I'm posting this big a code because i think perhaps it's the parent element properties that are somehow interfering with the texboxes but I can't seem to find a solution for this. Can someone please help.
<Canvas Name="encounterTab" Style="{StaticResource canvasRecording}" Visibility="Hidden" Width="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenWidthKey}}" FocusManager.IsFocusScope="True">
<Grid Height="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenHeightKey}}" Width="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenWidthKey}}" Margin="0,0,0,0" FocusManager.IsFocusScope="True">
<DockPanel Style="{StaticResource screenTitleDock}" Grid.Row="0" VerticalAlignment="Top" >
<TextBlock Name="textBlock1" Style="{StaticResource screenTitle}">ENCOUNTER DETAILS</TextBlock>
</DockPanel>
<Grid Style="{StaticResource gridRecording}" SizeChanged="MainGrid_SizeChanged" Name="gridEncDetails" FocusManager.IsFocusScope="True">
<Grid.LayoutTransform>
<ScaleTransform
CenterX="0"
CenterY="0"
ScaleX="{Binding ElementName=myMainWindow, Path=ScaleValue}"
ScaleY="{Binding ElementName=myMainWindow, Path=ScaleValue}" />
</Grid.LayoutTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="188*"></ColumnDefinition>
<ColumnDefinition Width="149*"></ColumnDefinition>
<ColumnDefinition Width="63*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label x:Name="lblApptTime" Content="Time:" Grid.Column="0" Grid.Row="0" />
<TextBox x:Name="txtTime" GotKeyboardFocus="txtApptTimeKeyBoadFocus" GotMouseCapture="txtApptTime_MouseClick" Grid.Column="1" Grid.Row="0" Width="149" LostFocus="txtApptTime_LostFocus" HorizontalAlignment="Left" MouseDoubleClick="txtApptTime_MouseDoubleClick" Margin="0,11" Height="38" GotTouchCapture="txtApptTime_GotTouchCapture" />
<ComboBox x:Name="ddlAmPm" VerticalContentAlignment="Center" Grid.Row="0" Grid.Column="2" Width="55" IsSynchronizedWithCurrentItem="True" Margin="0,10" HorizontalAlignment="Right" Height="38">
<ComboBoxItem>AM</ComboBoxItem>
<ComboBoxItem>PM</ComboBoxItem>
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid >
<TextBlock Height="Auto"
HorizontalAlignment="Stretch"
VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<Label x:Name="lblNo" Content="No:" Grid.Column="0" Grid.Row="1" Margin="0,11" Height="38" />
<TextBox x:Name="txtEncounterNumber" Grid.Column="1" Grid.Row="1" KeyDown="txtEncounterNumber_KeyUp" TextChanged="txtEncounterNumber_TextChanged" HorizontalAlignment="Left" Width="212" Margin="0,10" Grid.ColumnSpan="2" Height="Auto" />
<Button x:Name="btnNext1" Grid.Row="2" Grid.ColumnSpan="3" Style="{StaticResource btnRec}" Click="btnNext1_Click" TouchUp="btnTouchNext1_Click" Margin="50,20,50,10" >
<Image Source="Assets/btnNext.png" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Button>
</Grid>
</Grid>
</Canvas >
Note:- When i start typing the caret appears but disappears when i clear the textbox values.
It looks like you problem might comes from the ScaleTransform. If a TextBox is scaled to less then it's original size it's cursor disappears. This happens because the TextBox caret is with Width of 1 and when scaled down it becomes less then 1. So it's not visualized at all.
As a workaround make the minimal possible size as default so UI is only scaled up.
Another workaround it to create a custom caret like it's shown here WPF TextBox Inside ViewBox loses Cursor on resize
once again after hours of struggle with WPF I need your awesome help.
I have read many different StackOverflows, nonetheless, I cannot seem to get my current situation working and I don't understand why. I have chosen to use a Grid in contrast to a DockPanel and I would like to keep it that way as well. According to what I have read the row definitions are ok, the second row of the template grid should automatically stretch. Unfortunately it does not, as it seems that the last row of the grid does not move away.
This is how my window looks at the moment:
As you can see is the blue row not at the bottom of the window. In fact, the window should not be that long in the first place.
This is the code snippet of my Generic.xaml file that is relevant to the problem.
The way it works is, that I have a Skin with a custom control group:
<!-- Window START-->
<ControlTemplate x:Key="WindowTemplate" TargetType="{x:Type Window}">
<Border BorderBrush="LightGray" BorderThickness="1" Background="Red" Padding="0" VerticalAlignment="Stretch">
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Top" Background="Blue" MouseDown="Window_MouseDown">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<!-- HEADER START-->
<Frame x:Name="header_background" Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="0" Background="#ddd" BorderThickness="0 0 0 1" BorderBrush="#c9c9c9"/>
<Image x:Name="LogoICon" Source="/MTApp;component/Resources/Icon.png" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" Margin="10 8"/>
<Label x:Name="windowTitle" Grid.ColumnSpan="2" Content="{TemplateBinding Title}" VerticalAlignment="Center" Foreground="#393939" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Segoe UI Regular" FontSize="12"/>
<Grid Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="19"/>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="20" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Button x:Name="minimizeBtn" Content="0" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="1" Margin="3 0 0 0" Click="minimizeBtn_Click"/>
<Button x:Name="maximizeBtn" Content="2" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="2" Margin="3 0 0 0" Click="maximizeBtn_Click"/>
<Button x:Name="quitBtn" Content="r" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="3" Margin="3 0 0 0" Click="quitBtn_Click"/>
</Grid>
<!-- HEADER END-->
<!-- CONTENT START-->
<ContentPresenter Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Height="Auto"/>
<!-- CONTENT END-->
<!-- FOOTER START-->
<Border x:Name="footer_background" Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="2" Height="25">
<ResizeGrip />
</Border>
<!-- FOOTER END-->
</Grid>
</Border>
</ControlTemplate>
<!-- Window END-->
<Style x:Key="LightSkin_0_1" TargetType="Window">
<Setter Property="WindowStyle" Value="None" />
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="ResizeMode" Value="CanResizeWithGrip" />
<Setter Property="Template" Value="{StaticResource WindowTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding WindowState}" Value="Maximized">
</DataTrigger>
</Style.Triggers>
</Style>
And my MainWindow.xaml is:
<Window x:Class="UHashIt.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:UHashIt"
mc:Ignorable="d"
Title="Window title"
WindowStartupLocation="CenterScreen"
MinHeight="275"
MinWidth="700"
Width="700"
Style="{DynamicResource LightSkin_0_1}">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Menu -->
<Border VerticalAlignment="Top" Padding="5" Background="#f2f2f2" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" BorderThickness="0 0 0 1" BorderBrush="LightGray">
<DockPanel >
<Menu DockPanel.Dock="Left">
<MenuItem Header="File">
<MenuItem Header="Add File" />
<MenuItem Header="Export.." />
<Separator />
<MenuItem Header="Close"/>
</MenuItem>
<MenuItem Header="Help">
<MenuItem Header="Online Documentation" />
<MenuItem Header="About"/>
</MenuItem>
</Menu>
</DockPanel>
</Border>
<!-- Menu End -->
<!-- Content -->
<Grid Grid.Row="1" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Label Style="{DynamicResource headline4}" Content="File 1" Grid.Row="0" Grid.Column="1"/>
<TextBox Grid.Row="1" Style="{DynamicResource NormalTextBox}" Grid.Column="1"/>
<Button Grid.Column="2" Grid.Row="1" Style="{DynamicResource CommonButton}" Height="30" Width="30" VerticalAlignment="Top"/>
<Label Style="{DynamicResource headline5}" Grid.Row="1" Grid.Column="3"/>
<Label Style="{DynamicResource headline4}" Content="File 2" Grid.Row="2" Grid.Column="1"/>
<TextBox Grid.Row="3" Style="{DynamicResource NormalTextBox}" Grid.Column="1"/>
<Button Grid.Column="2" Grid.Row="3" Style="{DynamicResource CommonButton}" Height="30" Width="30" VerticalAlignment="Top"/>
<Label Style="{DynamicResource headline5}" Grid.Row="3" Grid.Column="3"/>
<!-- Hash Button and Selection -->
<ComboBox Grid.Row="4" Grid.Column="1" HorizontalAlignment="Left" Width="200" Height="30">
<ComboBoxItem>
Please Choose Your Algorithm
</ComboBoxItem>
</ComboBox>
<Button Grid.Column="1" Grid.Row="4" Style="{DynamicResource ActionBtn}" Content="Button" HorizontalAlignment="Right"/>
<!-- End-->
</Grid>
<!-- Content End-->
</Grid>
I cannot explain myself why the "blue bar" is not attached to the bottom. Despite the fact, that the window is so big.
I think you want to change this:
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Top" Background="Blue" MouseDown="Window_MouseDown">
to this:
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Stretch" Background="Blue" MouseDown="Window_MouseDown">
I'm trying to establish a 'simple' window which involves many different controls.
The issue I'm encountering is that I'm only 10% done and my XAML coding already takes up many lines. Going by the concept of not repeating code, I'm wondering if there is a more efficient method to keep my code clean, neat and efficient.
Is there a solution similar to resource dictionaries or classes?
Thanks in Advance!
Here is my XAML Code:
<Window
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" mc:Ignorable="d" x:Class="League_of_Legends_Alpha_1_0.MainWindow"
Title="MainWindow" Height="446" Width="1366">
<Grid Background="Black" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="73*"></ColumnDefinition>
<ColumnDefinition Width="42*"/>
<ColumnDefinition Width="166*"/>
<ColumnDefinition Width="269*"></ColumnDefinition>
<ColumnDefinition Width="270*"></ColumnDefinition>
<ColumnDefinition Width="270*"></ColumnDefinition>
<ColumnDefinition Width="269*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="34*" MaxHeight="34"/>
<RowDefinition Height="32*" MaxHeight="32"/>
<RowDefinition Height="32*" MaxHeight="32"/>
<RowDefinition Height="20*"/>
<RowDefinition Height="19"/>
<RowDefinition Height="20*"/>
<RowDefinition Height="19*"/>
<RowDefinition Height="32*"/>
<RowDefinition Height="34*" MaxHeight="34"/>
<RowDefinition Height="142*"/>
<RowDefinition Height="31*"/>
</Grid.RowDefinitions>
<Viewbox Stretch="Uniform" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3">
<Label Content="Summoner Name - Champion Name - Summoner Level" Foreground="White"></Label>
</Viewbox>
<Viewbox Stretch="Uniform" Grid.Column="3" Grid.Row="0">
<Label Content="Summoner Name - Champion Name - Summoner Level" Foreground="White"></Label>
</Viewbox>
<Viewbox Stretch="Uniform" Grid.Column="4" Grid.Row="0">
<Label Content="Summoner Name - Champion Name - Summoner Level" Foreground="White"></Label>
</Viewbox>
<Viewbox Stretch="Uniform" Grid.Column="5" Grid.Row="0">
<Label Content="Summoner Name - Champion Name - Summoner Level" Foreground="White"></Label>
</Viewbox>
<Viewbox Stretch="Uniform" Grid.Column="6" Grid.Row="0">
<Label Content="Summoner Name - Champion Name - Summoner Level" Foreground="White"></Label>
</Viewbox>
<Viewbox Stretch="Uniform" Grid.Column="3" Grid.Row="3">
<Label Content="Summoner Name - Champion Name - Summoner Level"></Label>
</Viewbox>
<Viewbox Stretch="Uniform" Grid.Column="4" Grid.Row="3">
<Label Content="Summoner Name - Champion Name - Summoner Level"></Label>
</Viewbox>
<Viewbox Stretch="Uniform" Grid.Column="5" Grid.Row="3">
<Label Content="Summoner Name - Champion Name - Summoner Level"></Label>
</Viewbox>
<Viewbox Stretch="Uniform" Grid.Column="6" Grid.Row="3">
<Label Content="Summoner Name - Champion Name - Summoner Level"></Label>
</Viewbox>
<Image HorizontalAlignment="Left" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Margin="5,0,5,0" Height="64" VerticalAlignment="Top" Width="64" Source="Blank.png" />
<Image HorizontalAlignment="Left" Grid.Row="1" Grid.Column="1" Height="32" VerticalAlignment="Top" Width="32" Source="Blank.png" Margin="5,0,0,0"/>
<Image HorizontalAlignment="Left" Grid.Row="2" Grid.Column="1" Height="32" VerticalAlignment="Top" Width="32" Source="Blank.png" Margin="5,0,0,0"/>
<Image Grid.Column="1" HorizontalAlignment="Left" Height="32" Margin="5,3,0,0" Grid.Row="3" Grid.RowSpan="2" VerticalAlignment="Top" Width="32" Source="Blank.png"/>
<Viewbox Grid.Column="2" Grid.Row="1" Stretch="UniformToFill">
<Label Content="Runes" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="White" Width="166" Height="31" FontWeight="Bold"/>
</Viewbox>
<Viewbox Grid.Column="2" Grid.Row="2" Stretch="Fill">
<Label Content="Masteries: 21/0/9" Grid.Column="2" HorizontalAlignment="Left" Height="32" Grid.Row="2" VerticalAlignment="Top" Width="166" Foreground="White" HorizontalContentAlignment="Center" FontWeight="Bold"/>
</Viewbox>
<Label Content="Challenger IV (100LP)" Grid.Column="2" HorizontalAlignment="Left" Grid.Row="3" VerticalAlignment="Top" Width="161" Foreground="White" FontSize="9" FontWeight="Bold"/>
<Label Content="K/D/A" HorizontalAlignment="Left" Grid.Row="3" VerticalAlignment="Top" Width="73" Foreground="White" FontSize="9" FontWeight="Bold"/>
<Label Content="Label" HorizontalAlignment="Left" Margin="10,5,0,0" Grid.Row="4" VerticalAlignment="Top"/>
<Label Content="Games: 10000" HorizontalAlignment="Left" Height="19" Grid.Row="4" VerticalAlignment="Top" Width="73" Foreground="White" FontSize="8.5" FontWeight="Bold"/>
<Label Content="Win Ratio:" HorizontalAlignment="Left" Height="20" Grid.Row="5" VerticalAlignment="Top" Width="73" Foreground="White" FontSize="9" FontWeight="Bold"/>
<Label Content="Last Season: Challenger IV (100LP)" Grid.Column="2" HorizontalAlignment="Left" Height="20" Grid.Row="5" VerticalAlignment="Top" Width="166" FontSize="8.5" Background="Black" Foreground="White" Margin="0,1,0,0" Grid.RowSpan="2" FontWeight="Bold"/>
<Label Content="Promotion Series: 3W/1L" Grid.Column="2" HorizontalAlignment="Left" Grid.Row="4" VerticalAlignment="Top" Width="166" Foreground="White" FontSize="8.5" Height="19" FontWeight="Bold"/>
<Label Content="100.5%" Grid.Column="1" HorizontalAlignment="Left" Grid.Row="5" VerticalAlignment="Top" Height="20" Width="42" Foreground="White" FontSize="9" FontWeight="Bold"/>
<Label Content="Normal Wins:" HorizontalAlignment="Left" Grid.Row="6" VerticalAlignment="Top" Width="73" Foreground="White" FontSize="8" FontWeight="Bold"/>
<Label Content="10000" Grid.Column="1" HorizontalAlignment="Left" Grid.Row="6" VerticalAlignment="Top" Height="19" Width="42" Foreground="White" FontSize="8" FontWeight="Bold"/>
<Label Content="OP.GG" Grid.Column="2" HorizontalAlignment="Left" Grid.Row="6" VerticalAlignment="Top" Width="168" Foreground="White" FontSize="8" Grid.ColumnSpan="2" FontWeight="Bold"/>
<!--
<Border Grid.Column="0" Grid.RowSpan="2" BorderBrush="Aqua" BorderThickness="5" CornerRadius="8"/>
-->
</Grid>
</Window>
EDIT/ANSWER:
What I first did was create a ResoureDictionary and added a datatemplate with a grid.
<DataTemplate x:Key="myDataTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="4*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
</grid>
Then in my main window, I bound the datatemplate to my grid using ContentControl.
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="32"/>
<RowDefinition/>
<RowDefinition Height="32"/>
<RowDefinition/>
<RowDefinition Height="32"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="0" Grid.Row="1"></ContentControl>
<ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="1" Grid.Row="1"></ContentControl>
<ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="2" Grid.Row="1"></ContentControl>
<ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="3" Grid.Row="1"></ContentControl>
<ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="4" Grid.Row="1"></ContentControl>
<ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="0" Grid.Row="3"></ContentControl>
<ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="1" Grid.Row="3"></ContentControl>
<ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="2" Grid.Row="3"></ContentControl>
<ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="3" Grid.Row="3"></ContentControl>
<ContentControl ContentTemplate="{StaticResource myDataTemplate}" Grid.Column="4" Grid.Row="3"></ContentControl>
</Grid>
Also for those who are new to WPF like me, you also need to reference the Resource (as I used a resource dictionary)
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="MainDataTemplateDictionary.xaml">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
I think you're better off using an ItemsControl with a databound template... something like this.
<ItemsControl ItemsSource="{Binding MyCollection}" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Viewbox Stretch="Uniform">
<!-- note that this requires a bindable property "SummonerDescription" in your viewmodel that combines the summoner name, champion name and summoner level -->
<Label Content="{Binding SummonerDescription}" Foreground="White"></Label>
</Viewbox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
For more info on itemscontrols and databinding, look here
In this case, you might want to combine the ItemsControl with a UserControl that renders a single "row" (or column?) in your table.
For declaring repeating property values of the same element e.g.
<Grid>
<Viewbox Stretch="Uniform" x:Name="viewBox1">
<Viewbox Stretch="Uniform" x:Name="viewBox2">
<Viewbox Stretch="Uniform" x:Name="viewBox3">
</Grid>
You can define once 'globally' as a style in the parent(or preceding levels) container e.g.
<Grid>
<Grid.Resources>
<Style TargetType="ViewBox">
<Setter Property="Stretch" Value="Uniform"/>
</Style>
</Grid.Resources>
<Viewbox x:Name="viewBox1">
<Viewbox x:Name="viewBox2">
<Viewbox x:Name="viewBox3">
</Grid>
Subsequently, you may override the specific element(s) you desire e.g.
<Grid>
<Grid.Resources>
<Style TargetType="ViewBox">
<Setter Property="Stretch" Value="Uniform"/>
</Style>
</Grid.Resources>
<Viewbox x:Name="viewBox1">
<Viewbox x:Name="viewBox2" Stretch="Fill">
<Viewbox x:Name="viewBox3">
</Grid>
I have a C# WinRT/8.1 app that uses a ListView with a child stack panel to show items in a horizontal row. That works fine, except I am having the same problem discussed in this SO post:
WinRT Xaml ListView - Touch doesn't scroll well
Except worse. My items don't scroll even when the fingertip is pressed on the margin between items. Unfortunately I don't have a parent Panorama control or ScrollView control to blame. How can I fix this?
NOTE: I switched to a ListView from a GridView because of SO posts I read that indicated GridView's with horizontal items are problematic, which was the case for me.
Here is the XAML for the page:
<Page
<!-- headers snipped for brevity -->
<Page.Resources>
<Converters:DebugBindingConverter x:Key="DebugBindingConverter"/>
<Converters:VideomarkLocationToString x:Key="VideomarkLocationToString"/>
<common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<DataTemplate x:Key="HorzVideomarksItemTemplate1">
<Grid d:DesignWidth="977" d:DesignHeight="746" Height="121" Width="252">
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="52*"/>
<RowDefinition Height="23*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txtLocation" TextWrapping="Wrap" Text="{Binding OffsetSecs, Converter={StaticResource VideomarkLocationToString}}" Grid.Row="2" />
<TextBlock x:Name="txtNote" Text="{Binding Text}" TextTrimming="CharacterEllipsis"/>
<Image x:Name="imgThumbnail" Grid.Row="1" Source="{Binding ThumbnailAsync}"/>
<!-- <TextBlock x:Name="txtTest2" HorizontalAlignment="Left" Margin="81,93,0,0" TextWrapping="Wrap"
Text="{Binding Videomarks, Converter={StaticResource DebugBindingConverter}}" VerticalAlignment="Top" Height="87" Width="150" FontSize="12"/> -->
</Grid>
</DataTemplate>
</Page.Resources>
<Grid x:Name="gridPage"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="25" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="897*"/>
<ColumnDefinition Width="469*"/>
</Grid.ColumnDefinitions>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="347*"/>
<RowDefinition Height="231*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid x:Name="gridTopRow" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,894,40" Tapped="pageTitle_Tapped"/>
<Button x:Name="exitButton"
Click="exitButton_Click"
Style="{StaticResource ClosePaneAppBarButtonStyle}" Margin="1065,27,0,9" Grid.Column="1" Width="100" Visibility="{Binding Main.IsDebuggerAttached, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}" />
<Button x:Name="btnTest" Content="test" Grid.Column="1" HorizontalAlignment="Left" Margin="883,59,0,0" VerticalAlignment="Top" FontSize="36" Click="btnTest_Click" Visibility="Collapsed"/>
</Grid>
<WebView x:Name="webViewVideoPlayer" Grid.Row="1" ScriptNotify="ScriptNotifyPlayLocation" Margin="25" />
<Button x:Name="btnVideomark" Content="Bookmark" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="578,53,0,0" Height="54" FontSize="26.667" Click="btnVideomark_Click" Width="181"/>
<ListView
x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Opacity="1" IsHitTestVisible="False" Margin="20"
ItemsSource="{Binding Videomarks.VideomarksCollection, Source={StaticResource Locator}}"
ItemTemplate="{StaticResource HorzVideomarksItemTemplate1}" SelectionMode="None"
>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="stackVideomarksHorz" Orientation="Horizontal">
</StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<Border x:Name="borderAddVideomark" BorderThickness="5" Grid.ColumnSpan="2" Margin="369,53,319,112" Grid.Row="1" BorderBrush="#FF144989" CornerRadius="25" Opacity="0" IsHitTestVisible="False" Loaded="border_Loaded">
<Grid x:Name="gridAddVideomark" IsHitTestVisible="False" Grid.ColumnSpan="2" Grid.Row="1" Opacity="1" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="187*"/>
<ColumnDefinition Width="188*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="189*"/>
<RowDefinition Height="137*"/>
<RowDefinition Height="62*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="lblVideomarkLocation" Grid.Column="1" TextWrapping="Wrap" Text="TextBlock" Margin="40,10,10,10" FontSize="18.667"/>
<TextBox x:Name="txtVideomarkNote" Grid.Row="1" TextWrapping="Wrap" Grid.ColumnSpan="2" Margin="10,10,10,2"/>
<Button x:Name="btnOk" Content="OK" HorizontalAlignment="Left" Margin="92,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Click="btnOk_Click"/>
<Button x:Name="btnCancel" Content="Cancel" HorizontalAlignment="Left" Margin="88,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Grid.Column="1" Click="btnCancel_Click"/>
<Rectangle x:Name="rectVideomarkThumbnail" Fill="#FFF4F4F5" Stroke="Black" Margin="10"/>
</Grid>
</Border>
</Grid>
</Page>
I am not sure which directions you are trying to scroll, but I think your problem will be fixed if you disable the StackPanel scroll and enable scrolling in both directions on the ListView.
<ListView
x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Opacity="1" IsHitTestVisible="False" Margin="20"
ItemsSource="{Binding Videomarks.VideomarksCollection, Source={StaticResource Locator}}"
ItemTemplate="{StaticResource HorzVideomarksItemTemplate1}" SelectionMode="None"
ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Auto"
>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="stackVideomarksHorz" Orientation="Horizontal"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollMode="Disabled">
</StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>