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).
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 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.
I created this user control
<UserControl x:Class="POS1.Windows.Controles.txttransparente"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Height="auto" Width=" auto"
>
<Border BorderBrush="Yellow" Background="Transparent" CornerRadius="10,10,10,10" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2">
<TextBox Name="txt1" Background="Transparent" BorderBrush="Black" BorderThickness="3" Text="Usuario" FontSize="20" FontWeight="ExtraBold" ></TextBox>
</Border>
</UserControl>
When I add it to a Window,
<Controls:MetroWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:Custom="http://modernwpf" xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
x:Class="POS1.MainWindow"
xmlns:txt="clr-namespace:POS1.Windows.Controles"
Title="MainWindow" Height="292" Width="535" AllowsTransparency="True" WindowStyle="None"
>
<Grid>
<Grid.RowDefinitions >
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="133*"/>
<ColumnDefinition Width="134*"/>
<ColumnDefinition Width="135*"/>
<ColumnDefinition Width="133*"/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="4" Grid.RowSpan="7" CornerRadius="40,50,60,70">
<Border.Background>
<ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/b.jpg"/>
</Border.Background>
</Border>
<Border BorderBrush="Yellow" Background="Transparent" CornerRadius="10,10,10,10" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2">
<TextBox Background="Transparent" BorderBrush="Black" BorderThickness="3" Text="Usuario" FontSize="20" FontWeight="ExtraBold" ></TextBox>
</Border>
<TextBox Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" Text="Contraseña" FontSize="20" FontWeight="ExtraBold" ></TextBox>
<Button Grid.Row="5" Grid.Column="1" Content="Aceptar" FontSize="12" FontWeight="ExtraBold" ></Button>
<Button Grid.Row="5" Grid.Column="2" Content="Olvidé contraseña" FontSize="12" FontWeight="ExtraBold" ></Button>
<txt:txttransparente Content=" Hola Mundo" Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="2" ></txt:txttransparente>
</Grid>
</Controls:MetroWindow>
as you see I could not modify the txt1.Text, so I have instead used Content="hola mundo"
However this sees it as above, but not as similar to the button usuario.
Without explicitly navigating the control's visual tree, the elements in your UserControl need for you to implement mechanism to pass data from client code using your control to the elements contained within. A common strategy for doing this is to simply declare a property on your UserControl type itself, and then bind the appropriate member in the control's tree to that property.
For example:
class txttransparente : UserControl
{
public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
"Text", typeof(string), typeof(txttransparente));
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
}
Then in your XAML for the UserControl:
<UserControl x:Class="POS1.Windows.Controles.txttransparente"
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:POS1.Windows.Controles"
mc:Ignorable="d"
Height="auto" Width=" auto">
<Border BorderBrush="Yellow" Background="Transparent" CornerRadius="10,10,10,10"
Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2">
<TextBox Name="txt1" Background="Transparent" BorderBrush="Black"
BorderThickness="3"
Text="{Binding Text,
RelativeSource={RelativeSource AncestorType={x:Type local:
txttransparente}}}"
FontSize="20"
FontWeight="ExtraBold"/>
</Border>
</UserControl>
Note the change not only in the binding for the TextBox.Text property there, but also the addition of the xmlns:local declaration, so that the binding can find the parent UserControl object where the property exists.
These changes create the property, and connect it to the Text property of the control's TextBox element.
Then finally, where you use the UserControl, you simply set the Text property (instead of Content):
<txt:txttransparente Text="Hola Mundo" Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="2"/>
I have the XAML like this. (This code is just some part of my source code)
<UserControl x:Class="EmployeeClass"
...............>
.............
.............
<ListView x:Name="EmployeeList" Width="700" Height="500" Margin="10"
ItemsSource ="{Binding Source={x:Static local:Company.employeeList}}"
Background="Black"
ItemTemplateSelector="{DynamicResource myDataTemplateSelector}" Focusable="False"
IsSynchronizedWithCurrentItem="True">
</ListView>
</UserControl>
Here is one of my data template
<DataTemplate x:Key="SeniorEmployee" DataType="{x:Type local:ListEmployee}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="10">
<Image x:Name="ProfilePicture" Source="{Binding Path=ProfilePict}" Stretch="Fill" Width="80" Height="80" VerticalAlignment="Top"></Image>
<StackPanel Orientation="Vertical" Margin="5">
<TextBlock Text="{Binding Path=Attribution}" Foreground="White" TextWrapping="Wrap" Width="400" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<StackPanel Margin="7,5,0,7">
<UISkripsi3:CommandTextBox Name="AttributionTextBox" HorizontalAlignment="Left" Margin="10,5" Panel.ZIndex="1"
BannerText="Add to the attribution" FontSize="{DynamicResource LargeFontSize1}"
SpellCheck.IsEnabled="True" Style="{DynamicResource AttributionTextBoxStyle}"
TextWrapping="Wrap">
</UISkripsi3:CommandTextBox>
<Button Style="{DynamicResource StandardButtonStyle}" IsEnabled="{Binding ElementName=AttributionTextBox, Path=Text, Converter={StaticResource IsStringNullOrWhitespaceConverter}, ConverterParameter=Inverse}" Click="AttributionButtonClick" Height="22" HorizontalAlignment="Right" Margin="10,4,10,0" Panel.ZIndex="0" CommandTarget="{Binding ElementName=AttributionTextBox}" Content="Show" FontSize="{DynamicResource LargeFontSize1}">
</Button>
</StackPanel>
</Grid>
</DataTemplate>
If user type something in the AttributionTextBox and click the button, there will be a messagebox showing text typed by the user. I have tried
http://blogs.msdn.com/b/wpfsdk/archive/2007/04/16/how-do-i-programmatically-interact-with-template-generated-elements-part-ii.aspx
and visual tree helper at h*tp://msdn.microsoft.com/en-us/library/system.windows.media.visualtreehelper.aspx
My problem is, I can't find the AttributionTextBox in code behind. I also can't access the EmployeeList Listview because it wasn't generated in the code behind. Can anyone help me to solve the problem?
What about setting the Binding to TwoWay mode and accessing the Attribution property instead ? This seems much simpler than walking the visual tree.