I am trying to get my view to only tab between a pick username textbox and a massage textbox xaml. My first problem is the tab gets stuck on the enter username, my guess is it has a custom control for search suggestions that is next in line. Also it tabs through every button in the view and i don't want it to do that. I have tried to add a Tabindex to both textboxes and it has no effect. I left the Tabidex in both textboxs so you know which ones I am trying to tab between.
<UserControl x:Class="Clinical.Patient.Views.SendMessageDialogView"
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"
d:DataContext="{d:DesignInstance
Type=viewModels:SendMessageDialogViewModel}"
mc:Ignorable="d"
d:DesignWidth="320"
xmlns:properties="clr-namespace:Clinical.Patient.Properties"
xmlns:viewModels="clr-namespace:Clinical.Patient.ViewModels"
xmlns:patient="clr-namespace:Clinical.Patient"
xmlns:self="clr-namespace:System;assembly=mscorlib"
xmlns:views="clr-namespace:Clinical.Patient.Views"
d:DesignHeight="350"
xmlns:termAutoComplete="clr-
namespace:Clinical.Patient.Controls.TermAutoComplete"
xmlns:controls="clr-namespace:Clinical.Patient.Controls"
KeyboardNavigation.TabNavigation="Local">
<UserControl.Resources>
<viewModels:IsAtLeastGradeConverter x:Key="IsAtLeastGradeConverter"/>
<viewModels:IsAtLeastAutoCloseGradeConverter x:Key="IsAtLeastAutoCloseGradeConverter"/>
</UserControl.Resources>
<Border Padding="8"
MinWidth="320"
ClipToBounds="False">
<Border BorderThickness="1"
BorderBrush="{DynamicResource FocusBorderBrush}"
CornerRadius="2"
Background="{DynamicResource FocusBackgroundBrush}">
<Border.Effect>
<DropShadowEffect Color="{DynamicResource SubtleDivideBorderColor}"
Opacity="1"
ShadowDepth="0"
BlurRadius="10" />
</Border.Effect>
<StackPanel Orientation="Vertical"
Margin="10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{x:Static properties:Strings.SharingReportIs}"
Foreground="{DynamicResource CommonTextBrush}"
FontSize="13"
FontWeight="Bold"/>
<Border Grid.Column="1"
Width="180"
Margin="5 5 20 5"
HorizontalAlignment="Left"
Background="{DynamicResource FocusBackgroundBrush}"
BorderBrush="{DynamicResource FocusBorderBrush}"
BorderThickness=".5"
CornerRadius="8,8,8,8">
<DockPanel HorizontalAlignment="Center">
<views:ExamTypeIconView DockPanel.Dock="Left"
Type="{Binding ExamType}"
Foreground="{DynamicResource CommonTextBrush}"
IconHeight="30"/>
<StackPanel DockPanel.Dock="Left"
Margin="3">
<TextBlock Text="{Binding Status}"
Foreground="{DynamicResource CommonTextBrush}"
FontSize="13"/>
<TextBlock Text="{Binding Accession}"
Foreground="{DynamicResource CommonTextBrush}"
FontSize="13"/>
</StackPanel>
</DockPanel>
</Border>
</Grid>
<DockPanel HorizontalAlignment="Left"
MinWidth="280"
Margin="0 5 0 0">
<Button
x:Name="To"
HorizontalAlignment="Right"
MinWidth="65"
Margin="0,4,4,4"
IsDefault="True"
Command="{Binding ToCommand}"
Content="to.." Width="65" />
<TextBox x:Name="SendTo"
Text="{Binding Recipient, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
Style="{DynamicResource NavigationSearchTextBox}"
FontSize="{DynamicResource OneAndAQuarterFontSize}"
Padding="0 3 0 3"
VerticalAlignment="Center"
Width="225"
TabIndex="0"/>
<termAutoComplete:TermAutoComplete AutoCompleteSource="{Binding AutoCompleteSource}"
Padding="0 0 0 0"
TextBox="{Binding ElementName=SendTo}"/>
</DockPanel>
<Grid Margin="0 5 0 0">
<TextBlock Text="{x:Static properties:Strings.SharingMessage}"
Foreground="{DynamicResource CommonTextBrush}"
FontSize="13"
FontWeight="Bold" />
</Grid>
<TextBox x:Name="PeerReviewComments"
Margin="0 5 0 0"
MinLines="5"
AcceptsReturn="True"
TextWrapping="Wrap"
Text="{Binding Message, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Width="295"
TabIndex="1"/>
<DockPanel
MinWidth="280"
Margin="0,5,-5,0"
>
<Button
x:Name="Save"
HorizontalAlignment="Right"enter code here
MinWidth="65"
Margin="0,4,4,4"
IsDefault="True"
Command="{Binding SendCommand}"
Content="Send" Width="65"
DockPanel.Dock="Right"
/>
<Button
x:Name="Cancle"
HorizontalAlignment="Right"
MinWidth="65"
Margin="0,4,4,4"
IsDefault="True"
Command="{Binding CancelCommand}"
Content="Cancel" Width="65"
DockPanel.Dock="Right"
/>
</DockPanel>
</StackPanel>
</Border>
</Border>
</UserControl>
I believe you need to replace "TabIndex" with "KeyboardNavigation.TabIndex".
If that doesn't work, you can also skip elements in the tab sequence by setting KeyboardNavigation.IsTabStop on the element in XAML.
KeyboardNavigation.IsTabStop="False"
Source
For controls where tab "gets stuck" add:
KeyboardNavigation.TabNavigation="Continue"
To avoid tab hitting a control add:
KeyboardNavigation.IsTabStop="False"
Related
I want to make searchbox like when I search Items then listbox is show in this page. I have make listbox page is in another wpf window. Can you please help on this I am facing maki problem regarding this.
When I search listbox Items from MainWindow.Xaml and click button then of item show in main page. and Items on See software page.
Thankyou!
MainWindow.xaml
<Window Title="Welcome" Background="#FFD6D6D6" WindowStyle="None" ResizeMode="NoResize"
WindowStartupLocation="CenterScreen" MouseDown="Window_MouseDown"
AllowsTransparency="True" Height="600" Width="1050">
<!--Make serchbar -->
<Grid Background="#2892b5" Grid.Column="3" Margin="10,0,0,0" >
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition />
</Grid.RowDefinitions>
<Viewbox HorizontalAlignment="Left" Margin="22,4,0,0" VerticalAlignment="Center" Width="65">
<Image Source="/Resources/search_32px.png" Height="40" Width="70" />
</Viewbox>
<Viewbox HorizontalAlignment="Center" Margin="70,4,0,0" VerticalAlignment="Center" >
<Label Content="Search for software" FontWeight="Bold" FontSize="20" Foreground="White" Grid.Row="0" Width="286"/>
</Viewbox>
<TextBox Background="White" Foreground="Black" x:Name="search" FontSize="20" Grid.Row="1" TextChanged="TextBox_TextChanged" Margin="37,0,36,38"/>
<Button Grid.Row="1" Height="37" Width="37" Background="Transparent" BorderBrush="Transparent" VerticalAlignment="Top" HorizontalAlignment="Right">
<Image Source="/View/icons8_right_50px_1.png"/>
</Button>
</Grid>
MainWindow.xaml.cs
private void SearchClick_Click(object sender, RoutedEventArgs e)
{
}
SeeSoftware.xaml
<Window Title="SeeSoftware" Height="700" Width="800" WindowStyle="None" MouseDown="Window_MouseDown">
<ListBox x:Name="Listbox" Foreground="White" FontSize="15" BorderBrush="Transparent" Background="Transparent">
<ListBoxItem Height="50">
<StackPanel Orientation="Horizontal" Margin="20,0,0,0" HorizontalAlignment="Left">
<Image Height="30" Width="30" Source="/Resources/vscode.jpeg"/>
<Label VerticalAlignment="Center" Foreground="White" FontSize="18" Margin="20,0,0,0" Content="Visual Studio code" />
<TextBlock Margin="18,0,0,0" FontSize="18" VerticalAlignment="Center" >
<Hyperlink Foreground="White" NavigateUri="https://az764295.vo.msecnd.net/stable/6261075646f055b99068d3688932416f2346dd3b/VSCodeUserSetup-x64-1.73.1.exe" RequestNavigate="Hyperlink_RequestNavigate">
Install
<Image Height="13" Source="/Resources/icons8_download_26px.png"/>
</Hyperlink>
</TextBlock>
</StackPanel>
</ListBoxItem>
</ListBox>
I have custom title bar for all windows of my application.
I want to create a template that I can use many times on different windows or on Message Box
I am thinking what is the best practice to achieve this.
At the moment I have a title bar but it is hard coded in every window.
This is an example of one of the windows
<Window x:Class="MyApp.Configuration.Windows.NotMainWindow"
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"
Title="Some text"
Height="113.868" Width="405.84"
Background="#FFE5E5E5"
WindowStyle="None"
>
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="34" />
</WindowChrome.WindowChrome>
<Window.Resources>
<ResourceDictionary Source="pack://application:,,,/somefolder.somefolder;component/Resources/TitleBarIconsStyle.xaml" />
</Window.Resources>
<Border x:Name="MainWindowBorder" BorderThickness="0" >
<Grid x:Name="parentContainer">
<Grid.RowDefinitions>
<RowDefinition Height ="Auto"/>
<RowDefinition Height ="*"/>
</Grid.RowDefinitions>
<!--Window chrome-->
<Grid Grid.Row="0" Height="30" Background="#585856">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<!--App icon-->
<Image Source="/Resources/icon.png" Width="18" Margin="2" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBlock FontFamily="Arial" Margin="4 3 0 0" Text="Some text"/>
</StackPanel>
<!--Caption buttons-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button Style="{StaticResource MinimizeButtonStyle}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Minimize"
Click="CommandBinding_Executed_Minimize"/>
<Button x:Name="RestoreButton" Visibility="Collapsed" Style="{StaticResource RestoreButtonStyle}"
Click="CommandBinding_Executed_Restore" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Restore"/>
<Button x:Name="MaximizeButton" Visibility="Visible" Style="{StaticResource MaximizeButtonStyle}"
Click="CommandBinding_Executed_Maximize" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Maximize" />
<Button x:Name="CloseButton" Style="{StaticResource CloseButtonStyle}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
Click="CommandBinding_Executed_Close"/>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<TextBox x:Name="Input"/>
<Button x:Name="OkButton"
Content="Ok"/>
</Grid>
</Grid>
</Border>
</Window>
Based on this MSDN document , you can not customize (like change colors and add your icons) windows title bar in WPF App.
the solution is create your custom title bar style and set WindowStyle="None" in <Window/> tag.
There one custom title bar in my WPF app :
<Grid FlowDirection="RightToLeft">
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<StackPanel Margin="0 0 5 0" Orientation="Horizontal" Background="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" Grid.Row="0" Grid.Column="6" Grid.ColumnSpan="2" FlowDirection="LeftToRight">
<Button x:Name="btnCloseApp" IsEnabled="True" Margin="0 0 4 0" ToolTip="Exit" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Height="25" Width="25" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="DodgerBlue" Click="btnCloseApp_Click">
<materialDesign:PackIcon Kind="Shutdown" Height="20" Width="20"/>
</Button>
<Button x:Name="btnMinimizeApp" IsEnabled="True" ToolTip="Minimize" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Height="25" Width="25" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="DodgerBlue" Click="btnMiniApp_Click">
<materialDesign:PackIcon Kind="WindowMinimize" Height="20" Width="20"/>
</Button>
</StackPanel>
</Grid>
and in picture :
Again don't forget to set WindowStyle="None"
I'm trying to add an ScrollBar for my UserControl, I have a left Menu a Top bar and under the top bar is the Content where I put my UserControl so only the content need to have a ScrollBar.
I did this by Wrapping my the Code in my UserControl in <ScrollView></ScrollView>
Everything is working fine only not the Full hight not, When I set hight to Auto the content is not scrollable anymore... If I set it to 500px it works but this makes no sense why should I make my content 500px I want that the ScrollBar goes with my Windows size and be always so big like my Window.
It could be so easy microsoft (<StackPanel Scrollbar="Auto" />)...
...but why easy...
(Yes I found some Posts here with same problem but no one is resolving my problem)
<UserControl x:Class="mausys.telegram"
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:mausys"
mc:Ignorable="d" Width="Auto" Height="500">
<Grid Background="Aqua">
<ScrollViewer VerticalScrollBarVisibility="auto" >
<StackPanel Grid.Column="0" >
<TextBox x:Name="telegramtextBox" HorizontalAlignment="Left" Height="23" Margin="48,78,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
<TextBox x:Name="telegramtextBox1" HorizontalAlignment="Left" Height="23" Margin="48,153,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
<Label x:Name="telegramlabel" Content="Phone Number:" HorizontalAlignment="Left" Margin="48,52,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.219,-0.282" Width="106" Height="26"/>
<Label x:Name="telegramlabel1" Content="Verifycation Code:" HorizontalAlignment="Left" Margin="48,122,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.506,-4.269"/>
<Button x:Name="telegrambutton" Content="Verify" HorizontalAlignment="Left" Margin="173,156,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="-0.234,0.571"/>
<Button x:Name="Telegrambutton1" Content="Login" HorizontalAlignment="Left" Margin="173,78,0,0" VerticalAlignment="Top" Width="75" Click="Phone_Click" />
<Button x:Name="tglogin" Click="tglogin_Click" Content="TG LogIn" HorizontalAlignment="Left" Background="BlanchedAlmond" Width="120" Margin="277,52,323,928" />
<Button x:Name="feedy" Click="feedy_Click" Content="feedy" HorizontalAlignment="Left" Background="BlanchedAlmond" Width="120" Margin="277,13,323,967" />
<Button x:Name="tbrowser" Content="Open Browser" HorizontalAlignment="Left" Background="BlanchedAlmond" Width="120" Margin="277,86,323,894" />
<Label x:Name="telegramlabel2" Content="Telegram Account Login" HorizontalAlignment="Left" FontWeight="Bold" Margin="48,10,0,0" VerticalAlignment="Top"/>
<TabControl x:Name="tabControl" HorizontalAlignment="Left" Height="343" Margin="48,181,0,0" VerticalAlignment="Top" Width="215">
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<ListBox x:Name="listBox" Height="100" Width="100"/>
</TabControl>
<ListView x:Name="listView" HorizontalAlignment="Left" Height="151" Margin="277,122,0,0" VerticalAlignment="Top" Width="134">
<ListView.View>
<GridView>
<GridViewColumn/>
</GridView>
</ListView.View>
</ListView>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="10,529,0,0" VerticalAlignment="Top" Width="300" Height="126"/>
<Button x:Name="button2" Content="Button" HorizontalAlignment="Left" Margin="10,660,0,0" VerticalAlignment="Top" Width="75" Height="330"/>
</StackPanel>
</ScrollViewer>
</Grid>
<Window x:Class="xyz.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:fa="http://schemas.fontawesome.io/icons/"
xmlns:local="clr-namespace:mausys"
xmlns:local1="clr-namespace:mausys.UserControls"
mc:Ignorable="d"
Title="mausys" Height="Auto" Width="1596" WindowStyle="SingleBorderWindow" >
<!--Status and Revisions-->
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="85" />
</WindowChrome.WindowChrome>
<Border>
<DockPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!--Menu Left-->
<!--Hover effect-->
<StackPanel Grid.Column="0" Background="#23282D" >
<Label Foreground="#9EA3A8" FontWeight="Bold" FontSize="18" HorizontalAlignment="Left" Margin="15 0 0 5" >
<StackPanel Orientation="Horizontal">
<Image Source="img/logomausys.png" Width="35" Height="32" />
<TextBlock Text="MAUSYS" />
</StackPanel>
</Label>
<Button Background="#23282D" WindowChrome.IsHitTestVisibleInChrome="True" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="Dashboard" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="Dashboard" />
</StackPanel>
</Button>
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="MLink" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Button>
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="MLink" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Button>
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="Angellist" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Button>
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="Anchor" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Button>
<!--SEPARATOR-->
<Separator Background="#9EA3A8" Margin="0 10 0 10 " />
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="AddressBook" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLinks" />
</StackPanel>
</Button>
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="CalendarPlusOutline" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Button>
<Label Foreground="#9EA3A8" FontSize="12" HorizontalAlignment="Left" Margin="5 30 0 5" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="ArrowCircleLeft" Foreground="#9EA3A8" Height="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Label>
</StackPanel>
<!--APP Content-->
<StackPanel Grid.Column="1" Background="#F1F1F1" >
<!--Top Bar-->
<Grid VerticalAlignment="Top" Background="#23282D" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Center" >
<TextBlock Text="hhh" FontWeight="Bold" Foreground="#9EA3A8" Margin="6 0 0 0" />
</StackPanel>
<StackPanel Grid.Column="1" >
</StackPanel>
<StackPanel Height="31" Grid.Column="2" VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right" >
</StackPanel>
</Grid>
<!--Window Controls & Console -->
<Grid VerticalAlignment="Top" Background="#0073AA" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel WindowChrome.IsHitTestVisibleInChrome="True" Grid.Column="0" VerticalAlignment="Center" >
<Button Content="ADD NEW" Width="70" Height="50" HorizontalAlignment="Left" Margin="10 0 0 0" />
</StackPanel>
<StackPanel Grid.Column="1" >
</StackPanel>
<StackPanel Grid.Column="2" WindowChrome.IsHitTestVisibleInChrome="True" Height="60" VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right" >
<Button fa:Awesome.Content="WindowMinimize" Foreground="#0073AA" Background="White" Content="_" Height="31" Width="31" Margin="3" Name="MinimizeButton" Click="MinimizeButton_Click" />
<Button fa:Awesome.Content="WindowMaximize" Foreground="#0073AA" Background="White" Content="[]" Height="31" Width="31" Margin="3" Name="MaximizeButton" Click="MaximizeButton_Click" />
<Button fa:Awesome.Content="Close" Foreground="#0073AA" Background="White" Content="X" Height="31" Width="31" Margin="3 3 20 3" Name="CloseButton" Click="CloseButton_Click" />
</StackPanel>
</Grid>
<!--Window Controls & Console -->
<Grid VerticalAlignment="Top" Background="Beige">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Center" >
<!--local:telegram />-->
</StackPanel>
</Grid>
<!--User Controls HERE ARE THE USER CONTROLS-->
<local:telegram />
</StackPanel>
</Grid>
</DockPanel>
</Border>
So I struggle with the XAML alignment a bit and I hoped for someone who could help me get trough it.
This is the Code. I will break it down below:
<Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="0">
<StackPanel>
<Button Style="{StaticResource AppBarButtonStyle}" Click="ShowPopupOffsetClicked"/>
<Image Source="Assets/images/icon_thumbnail.png"></Image>
</StackPanel>
<Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="300" Height="350">
<StackPanel >
<TextBlock>
<Run x:Name="MyRun" Text=""/>
</TextBlock>
<StackPanel Orientation="Horizontal">
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBox x:Name="searchTextBox" Width="200" Height="30" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</StackPanel>
</Border>
</Popup>
</Grid>
This part will be MyRun Text later:
<TextBlock>
<Run x:Name="MyRun" Text=""/>
</TextBlock>
This part is the SearchBar and the search-button which should be perfectly in line. How do I do this?
<StackPanel Orientation="Horizontal">
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBox x:Name="searchTextBox" Width="200" Height="30" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
</StackPanel>
This is the next and previous button. It should be perfectly in line with MyRun. How would I do that?
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
And at last will be the "Close" Button. I guess it is kinda already perfect?:
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
Now a screenshot of how it Looks like and how I want it to look:
This is how it is:
This is how I want it to be:
I know that I can Change the height of the popup. But when I Change the height some Things disappear (for example the close Botton won't be visible because it is too far down while the popup height is too low).
Sorry for the long post. I hope someone can help me out here.
You should be able to use a Grid with three RowDefinitions. Something like this:
<Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="300" Height="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- row 1 -->
<StackPanel Orientation="Horizontal">
<TextBox x:Name="searchTextBox" Width="200" Height="30" Margin="0,0,3,0" />
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
<!-- row 2 -->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
<TextBlock Grid.Column="1" HorizontalAlignment="Center">
<Run x:Name="MyRun" Text=""/>
</TextBlock>
</Grid>
<!-- row 3 -->
<Button Grid.Row="2"
Content="Close" Click="ClosePopupClicked"
HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</Grid>
</Border>
</Popup>
You can adjust the space between the controls using the Margin property.
I have a ListView of ToggleButtons. Every button is binded to a Popup window.
Every Popup window is being opened at the same place as the button, but I want it to be at the same place as the first button.
Here is the code and images:
The buttons:
This is what happens when the first button is open:
This is what happens when the second button is open:
<ListView x:Name="ListOfRecipes" HorizontalAlignment="Center" VerticalAlignment="Top" ItemsSource="{Binding}" Grid.Row="1" Margin="25,0.333,25,35" ScrollViewer.VerticalScrollMode="Enabled" Grid.RowSpan="5" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="90*" />
<RowDefinition Height="150*" />
<RowDefinition Height="0*" />
</Grid.RowDefinitions>
<ToggleButton x:Name="RecipeButton" Grid.Row="1" BorderBrush="#FF65C365" VerticalAlignment="Center" HorizontalAlignment="Center" Click="Button_Click" Height="150" Width="328" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Height="128" Width="328">
<Image Source="{Binding Path=ImageUri}" Height="128" Width="128" Margin="0,6,0,-5.667" />
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" Height="128" Width="192">
<TextBlock Height="25" Width="190" Foreground="#FF6FDC13" Text="{Binding Name}" VerticalAlignment="Top" />
<Image Name="YesOrNoImage" Source="{Binding Path=YesOrNoImage}" Width="102" Height="102" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=RecipeButton, Mode=TwoWay}" Height="0" Width="328" VerticalAlignment="Center" Name="PopupOne" IsLightDismissEnabled="True" IsHoldingEnabled="False" ScrollViewer.VerticalScrollMode="Enabled" Visibility="{Binding IsChecked, ElementName=RecipeButton}">
<Border BorderBrush="#FF65C365" BorderThickness="1" Background="White" Height="514" Width="328">
<ScrollViewer VerticalScrollMode="Enabled" >
<StackPanel Orientation="Vertical" ScrollViewer.VerticalScrollMode="Enabled">
<Image Source="{Binding Path=ImageUri}" Height="328" Width="328" />
<TextBlock Foreground="#FF6FDC13" Text="{Binding Name}" HorizontalAlignment="Left" FontSize="28" />
<TextBlock Foreground="Black" Text="{Binding RecipeText}" HorizontalAlignment="Left" FontSize="18" />
</StackPanel>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In the popup you can define a grid and set the popup height there
Something like this:
<Popup x:Name="resultsPopup"
AllowsTransparency="True"
IsOpen="{Binding IsResultsPopupOpen,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
Placement="Bottom"
PlacementTarget="{Binding ElementName=SearchBox}"
StaysOpen="False">
<Grid Width="{Binding ActualWidth,
ElementName=SearchBox}"
Height="300">
</Grid>
</Popup>
UPDATE:
You can place the popup wherever you want with the Placement property as shown above, the set the binding of the "PlacementTarget" to the control you want to bind.
In the example above the popup will be shown below the UI control named SearchBox