I dont quite understand how to make a simple ContentDialog. Basically I want to have a button that when pressed the ContentDialog Pops up. The ContentDialog should have at least 1 Button. I guess Im missing out something. I tried to put my part of the Code into it but there is an error when it Comes to build the program. My guess is that I still have to enter something in the XAML to make it work. This is the default Code of the .XAML (at the Bottom of the post you find the Code I want to put into it):
<Page
x:Class="PDFViewerSDK_Win10.PDFReaderPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PDFViewerSDK_Win10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" SizeChanged="OnSizeChanged">
<Page.Resources>
<DataTemplate x:Key="MenuItemTemplate">
<Grid HorizontalAlignment="Left" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Margin="0,0,0,0" Orientation="Vertical">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource ApplicationForegroundThemeBrush}" Width="300" VerticalAlignment="Center" Text="{Binding Title}" HorizontalAlignment="Left" FontFamily="Segoe UI"/>
</StackPanel>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="68"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.35*"/>
</Grid.RowDefinitions>
<Canvas x:Name="mPDFView" Grid.RowSpan="3"/>
<Canvas x:Name="mPDFThumb" Grid.Row="2" Visibility="Visible"/>
<ListView x:Name="mMenuView"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0, 68, 0, 0"
ItemTemplate="{StaticResource MenuItemTemplate}"
IsItemClickEnabled="True"
ItemClick="OnMenuListItemClicked"
Visibility="Collapsed"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
Grid.RowSpan="2"/>
<Grid Height="68" Margin="0" VerticalAlignment="Top" Background="#7FC0C0C0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel HorizontalAlignment="Left" Grid.Column="0" Orientation="Horizontal">
<Button x:Name="backButton" Click="OnBtnGoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" Margin="10,10,0,0" Foreground="Black" BorderBrush="Black" Background="Black" AllowDrop="True" VerticalAlignment="Top" RenderTransformOrigin="-1.62,0.618"/>
<Button x:Name="searchBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="Assets/images/view_search.png"/>
</Button>
<Button x:Name="viewAnnotBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="Assets/images/annot_line.png"/>
</Button>
<Button x:Name="doneAnnotBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" Visibility="Collapsed">
<Image Source="Assets/images/annot_done.png"/>
</Button>
<Button x:Name="removeAnnotBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" Visibility="Collapsed">
<Image Source="Assets/images/annot_remove.png"/>
</Button>
<Button x:Name="selectBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<!--Image Source="Assets/images/icon_select.png"/-->
<BitmapIcon Name="mSelectIcon" UriSource="ms-appx:///Assets/images/icon_select.png" />
</Button>
<Button x:Name="viewMenuBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="Assets/images/icon_menu.png"/>
</Button>
<TextBox x:Name="mPageInput" Width="90" Margin="30,10,5,10" FontSize="30" KeyDown="OnKeyDown"/>
<TextBlock x:Name="mPageDisplay" Width="90" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30" Margin="0,10,0,10"/>
<Button x:Name="settingsBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="Assets/images/icon_setting.png"/>
</Button>
<Button x:Name="thumbnailBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnThumbItemTapped">
<Image Source="Assets/images/icon_thumbnail.png"/>
</Button>
<Image Source="Assets/images/icon_menu.png"/>
</StackPanel>
<StackPanel HorizontalAlignment="Right" Grid.Column="1" Orientation="Horizontal">
<Button x:Name="viewInfoBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="Assets/images/view_about.png"/>
</Button>
</StackPanel>
</Grid>
</Grid>
<Page.BottomAppBar>
<AppBar x:Name="mAppBar">
<Grid x:Name="PDFOptionPanel"/>
</AppBar>
</Page.BottomAppBar>
</Page>
Now where do I have to put this part of the Code? Do I have to add something? What am I missing here?
<ContentDialog x:Name="test" PrimaryButtonText="Ok" SecondaryButtonText="Cancel" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" </ContentDialog>
Derive from official document,
Use a ContentDialog to request input from the user, or to show information in a modal dialog. You can add a ContentDialog to an app page using code or XAML, or you can create a custom dialog class that's derived from ContentDialog. Both ways are shown in the examples section of this topic.
There are many ways could integrate ContentDialog to page, If you just make a simple ContentDialog, you could implement it in code behind.
private async void DisplayNoWifiDialog()
{
ContentDialog noWifiDialog = new ContentDialog()
{
Title = "No wifi connection",
Content = "Check connection and try again.",
CloseButtonText = "Ok"
};
await noWifiDialog.ShowAsync();
}
If you want implement it with xaml, please put your ContentDialog in the bottom of the root Grid. for example:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="This is ContentDialog"/>
<Button Click="Button_Click" Content="ClickMe"/>
<ContentDialog x:Name="test" PrimaryButtonText="Ok" SecondaryButtonText="Cancel" Tapped="OnOptionItemTapped" ></ContentDialog>
</Grid>
Please note, the ContentDialog that you provided missed > end mark. For more info please refer this.
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"
Im trying to desing a plugin for a engineering software using their API.
They have predefined UserControl blocks to help people with programming tools for their software.
Im trying to change the colour of foreground and text colour of said UserControl button, but haven't had any luck yet.
My knowledge in WPF or programming as a whole is limited, so haven't tried any fancy stuff.
So my question is: Is there an easy way to change the colours of objects inside UserControl blocks?
<tsd:PluginWindowBase
x:Class="MyFirstPlugin.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:MyFirstPlugin"
xmlns:UIControls="clr-namespace:Tekla.Structures.Dialog.UIControls;assembly=Tekla.Structures.Dialog"
xmlns:dialog="clr-namespace:Tekla.Structures.Dialog;assembly=Tekla.Structures.Dialog"
mc:Ignorable="d"
xmlns:tsd="clr-namespace:Tekla.Structures.Dialog;assembly=Tekla.Structures.Dialog"
Title="{tsd:Loc albl_Title_Plugin}" Height="500"
Width="800"
MinWidth="600"
MinHeight="400">
<Grid Margin="10,10,10,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<UIControls:WpfSaveLoad
HorizontalAlignment="Left"
Margin="0,0,0,0"
VerticalAlignment="Top"
/>
<UIControls:WpfOkApplyModifyGetOnOffCancel
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="0,0,0,0"
Grid.ColumnSpan="2" >
</UIControls:WpfOkApplyModifyGetOnOffCancel>
<Button
Margin="10,53,29,369">
</Button>
</Grid>
<UserControl x:Class="Tekla.Structures.Dialog.UIControls.WpfOkApplyModifyGetOnOffCancel"
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:Tekla.Structures.Dialog.UIControls">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="363*"/>
<ColumnDefinition Width="194*"/>
</Grid.ColumnDefinitions>
<DockPanel HorizontalAlignment="Stretch" LastChildFill="false" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Button Click="ok_Click" x:Name="okButton" Content="albl_OK" HorizontalAlignment="Left" Margin="11"
VerticalAlignment="Top" MinWidth="70" MaxWidth="200" Height="26" DockPanel.Dock="Left"/>
<Button Click="apply_Click" x:Name="applyButton" Content="albl_Apply" HorizontalAlignment="Left"
Margin="11" VerticalAlignment="Top" MinWidth="70" MaxWidth="200" Height="26" DockPanel.Dock="Left"/>
<Button Click="modify_Click" x:Name="modifyButton" Content="albl_Modify" HorizontalAlignment="Left"
Margin="11" VerticalAlignment="Top" MinWidth="70" MaxWidth="200" Height="26" DockPanel.Dock="Left"/>
<Button Click="get_Click" x:Name="getButton" Content="albl_Get" HorizontalAlignment="Left" Margin="11"
VerticalAlignment="Top" MinWidth="70" MaxWidth="200" Height="26" DockPanel.Dock="Left"/>
<Button Click="onoff_Click" x:Name="toggleButton" Content="" HorizontalAlignment="Left" Margin="11"
VerticalAlignment="Top" MinWidth="70" MaxWidth="200" Height="26" DockPanel.Dock="Left">
<Control.Background>
<ImageBrush ImageSource="Onoff.png"/>
</Control.Background>
</Button>
<Button Click="cancel_Click" x:Name="cancelButton" Content="albl_Cancel" HorizontalAlignment="Left"
Margin="11" VerticalAlignment="Top" Width="70" Height="26" DockPanel.Dock="Right"/>
</DockPanel>
</Grid>
</UserControl>
You can set the the Foreground color on the UserContol itself, but that will not apply to all controls inside.
<UIControls:WpfOkApplyModifyGetOnOffCancel Foreground="Red"/>
For those controls that do not apply it, you can use a relative source binding to refer to Foreground.
<Button x:Name="okButton" Content="albl_OK" HorizontalAlignment="Left" Margin="11"
VerticalAlignment="Top" MinWidth="70" MaxWidth="200" Height="26" DockPanel.Dock="Left"
Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type local:WpfOkApplyModifyGetOnOffCancel}}}"/>
If you intend to have multiple different foreground colors in your UserControl, like for your buttons specifically, you can always declare custom dependency properties in your control, e.g.:
public partial class WpfOkApplyModifyGetOnOffCancel : UserControl
{
// ...constructor, other code.
public static readonly DependencyProperty ButtonForegroundProperty = DependencyProperty.Register(
nameof(ButtonForeground), typeof(Brush), typeof(WpfOkApplyModifyGetOnOffCancel), new PropertyMetadata(Brushes.Black));
public Brush ButtonForeground
{
get => (Brush)GetValue(ButtonForegroundProperty);
set => SetValue(ButtonForegroundProperty, value);
}
}
Bind the Foreground property of the target control like above using a relative source binding.
<Button x:Name="okButton" Content="albl_OK" HorizontalAlignment="Left" Margin="11"
VerticalAlignment="Top" MinWidth="70" MaxWidth="200" Height="26" DockPanel.Dock="Left"
Foreground="{Binding ButtonForeground, RelativeSource={RelativeSource AncestorType={x:Type local:WpfOkApplyModifyGetOnOffCancel}}}"/>
Then you can assign the foreground color for your buttons directly, bind it or create a style.
<local:WpfOkApplyModifyGetOnOffCancel ButtonForeground="Red"/>
An alternative to the RelativeSource bindings above is to assign a name to your UserControl and use an ElementName binding instead, which is less verbose here.
<UserControl x:Class="Tekla.Structures.Dialog.UIControls.WpfOkApplyModifyGetOnOffCancel"
...
x:Name="WpfOkApplyModifyGetOnOffCancelInstance">
<Button x:Name="okButton" Content="albl_OK" HorizontalAlignment="Left" Margin="11"
VerticalAlignment="Top" MinWidth="70" MaxWidth="200" Height="26" DockPanel.Dock="Left"
Foreground="{Binding ButtonForeground, ElementName=WpfOkApplyModifyGetOnOffCancelInstance}"/>
<Button Content="Hello" Foreground="Black"/>
To change the background, use the Background property.
For example:
<Button Content="Hello" Background="Black"/>
I would like to change stack panel content/data on button click in the same window.
I have a menu list on left and on the right of the window I have 2 stackpanel which I want to update. This is actually my configuration screen. Following is my XAML code:
<Window x:Class="Manager.Screens.Configurations"
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:Manager.Screens"
mc:Ignorable="d"
Title="Configurations" Height="850" Width="1000" WindowStyle="None" >
<Border
BorderBrush="Black"
BorderThickness="0"
Padding="0">
<Grid Background="White" ShowGridLines="True" Margin="-3,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200*"/>
<ColumnDefinition Width="263*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Name="StackPanel1" VerticalAlignment="Top" Height="Auto" Width="Auto">
<Image Source="Resources\Images\config_back.jpg" Stretch="Fill" Opacity="0.65" Height="Auto" Margin="-3,-2,0,0"/>
<Button Margin="0,-1450,0,60" Height="38" Background="Transparent">
<StackPanel Orientation="Horizontal" Width="332">
<Image Source="Resources\Images\tools.png" Margin="75,0,25,0"/>
<TextBlock Text="General" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
</StackPanel>
</Button>
<Button Margin="0,-1350,0,10" Height="38" Background="Transparent">
<StackPanel Orientation="Horizontal" Width="332">
<Image Source="Resources\Images\setting.png" Margin="75,0,25,0"/>
<TextBlock Text="Settings" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
</StackPanel>
</Button>
<Button Margin="0,-1250,0,-40" Height="38" Background="Transparent">
<StackPanel Orientation="Horizontal" Width="332">
<Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
<TextBlock Text="Limits/Stations" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
</StackPanel>
</Button>
<Button Margin="0,-1150,0,-90" Height="38" Background="Transparent">
<StackPanel Orientation="Horizontal" Width="332">
<Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
<TextBlock Text="Portions" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
</StackPanel>
</Button>
<Button Margin="0,-1050,0,-140" Height="38" Background="Transparent">
<StackPanel Orientation="Horizontal" Width="332">
<Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
<TextBlock Text="Label Templates" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
</StackPanel>
</Button>
<Button Margin="0,-950,0,-190" Height="38" Background="Transparent">
<StackPanel Orientation="Horizontal" Width="332">
<Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
<TextBlock Text="RFID Containers" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
</StackPanel>
</Button>
<Button Margin="0,-850,0,-240" Height="38" Background="Transparent">
<StackPanel Orientation="Horizontal" Width="332">
<Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
<TextBlock Text="User Management" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
</StackPanel>
</Button>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" Name="StackPanel2" VerticalAlignment="Top" Orientation="Vertical">
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="0" HorizontalAlignment="Left" Name="StackPanel3" VerticalAlignment="Top">
<TextBlock FontSize="18" HorizontalAlignment="Center" Margin="0,0,0,15">StackPanel3</TextBlock>
<Button Margin="10">Button 7</Button>
<Button Margin="10">Button 8</Button>
<Button Margin="10">Button 9</Button>
<TextBlock>ColumnDefinition.Width="Auto"</TextBlock>
<TextBlock>StackPanel.HorizontalAlignment="Left"</TextBlock>
<TextBlock>StackPanel.VerticalAlignment="Top"</TextBlock>
<TextBlock>StackPanel.Orientation="Vertical"</TextBlock>
<TextBlock>Button.Margin="10"</TextBlock>
</StackPanel>
</Grid>
</Border>
</Window>
I haven't written any controls or functions so far please help me as I am new how can it be done in WPF.
Basically there are three main approaches to show / hide controls on your view. Here's the code that provides you with an example of each:
XAML:
<Window x:Class="WpfApp1.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Visibility="{Binding IsBlueRectangleVisible, Converter={StaticResource BooleanToVisibilityConverter}}" Fill="Blue" />
<Button Grid.Column="1" Grid.Row="0" Content="Binding to ViewModel" Command="{Binding BlueRectangleSwitchCommand}"/>
<Rectangle Grid.Column="0" Grid.Row="1" Visibility="{Binding ElementName=toggleBtn, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}" Fill="Red" />
<ToggleButton Grid.Column="1" Grid.Row="1" x:Name="toggleBtn" Content="Toggle switch" />
<Rectangle x:Name="greenRectangle" Grid.Column="0" Grid.Row="2" Fill="Green" />
<Button Grid.Column="1" Grid.Row="2" Content="Code behind" Click="GreenRectangleBtnClick"/>
</Grid>
</Window>
Code behind:
public partial class MainWindow : Window, INotifyPropertyChanged
{
public MainWindow()
{
InitializeComponent();
// Blue rectangle
// Initialize the command that is binded to one of your buttons
BlueRectangleSwitchCommand = new RelayCommand(o =>
{
// Switches the flag binded to Visibility property of one of your Rectangles
IsBlueRectangleVisible = !IsBlueRectangleVisible;
// Notify that UI shoud be re-rendered
OnPropertyChanged(nameof(IsBlueRectangleVisible));
});
// Next line is needed in order to bind this object to the DataContext of itself (wierd, isn't it?)
// So the MainWindow would know where to llok up for the properties you are binding to in XAML
DataContext = this;
}
// Blue rectangle
// Property that is binded to Visibility property of one of your Rectangles
public bool IsBlueRectangleVisible { get; set; }
// Blue rectangle
// Property that is binded to Command property of one of your Rectangles
public ICommand BlueRectangleSwitchCommand { get; private set; }
// Blue rectangle
// This implementation of INotifyPropertyChanged interface allows you to use OnPropertyChanged
// that is needed for notifying UI that your properties changed
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
=> PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
#endregion
// Green rectangle
private void GreenRectangleBtnClick(object sender, RoutedEventArgs e)
{
greenRectangle.Visibility = greenRectangle.Visibility == Visibility.Visible
? Visibility.Collapsed
: Visibility.Visible;
}
}
I added commentaries so you could easily distinguish between each of them. As it's up to you to decide which one suits you more.
But here's what I suggest:
If you don't need to track the actual state, use the Toggle switch (Red);
If you need to track the state of the switch or to switch if from your code behind - use Binding to ViewModel (Blue);
Never use the third one. Okay, this is a joke, sort of. If you need a really simple UI in a small application - use it all you want. But if there's a possibility that your app is going to grow so you'll need a separation of concerns, test-ability, etc, don't even look to this approach. It'll make your application a noodle pan (Green).
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.