How to change the content control Content in WPF? - c#

In my project I have fixed header & footer, and changeable content. so i have put ContentControl in my window.
<Grid>
<Canvas Name="canvas_Logo" HorizontalAlignment="Center" VerticalAlignment="Top" Width="180">
<Image Source="Images/k1.png" Grid.Row="1" Width="180" />
</Canvas>
<ContentControl VerticalAlignment="Center" Name="CC1" Grid.Row="2" Height="450"/>
<Canvas x:Name="canvas_Marque" ClipToBounds="True" Height="60" HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="1022" Background="DarkRed" />
</Grid>
It look like this...
I have create two user control name page1, page2. Page 1 has a button, when i click the button ContentControl has show page2.
so i have write the below code in button1_Click
MainPage n = new MainPage();
n.CC1.Content = new Page2();
But at the time of button click ContentControl not changed what can i do for that?
My page1 xaml
<Grid Background="AliceBlue">
<Label Content="Child1" Height="28" HorizontalAlignment="Left" Margin="74,65,0,0" Name="label1" VerticalAlignment="Top" Width="157" />
<Button Content="load page2 and destroy this" Height="31" HorizontalAlignment="Left" Margin="79,124,0,0" Name="button1" VerticalAlignment="Top" Width="186" Click="button1_Click" />
</Grid>
page2 xaml
<Grid Background="CadetBlue">
<Label Content="This is page 2" Height="28" HorizontalAlignment="Left" Margin="96,82,0,0" Name="label1" VerticalAlignment="Top" Width="148" />
</Grid>
How to change the content control Content in WPF?

Ah, my friend ... we meet again ... Good to see you're making progress on your project...
Now, my next suggestion would be: Don't do these things from the code behind ... Let the XAML binding to it's work ...
Usually, Using MVVM, you'll have your content control source binding on a property of a base view model type. So, let's assume VM1 and VM2 both extend BasicViewModel, and you have a property defined like this:
Public BasicViewModel Current_VM {get;set;}
Now, all you need to do when you want to swap, is change the Current_VM from VM1 to VM2, and the binding will do the rest, updating your window to the correct view (assuming you have the data templates set .. but you never said if you're using MVVM or not ...)

You cannot instantiate a new MainPage from the Page1 UserControl, since MainPage is already the host of Page1 (if I understand you right). If you're going to manage pages from the code-behing (not the best practice ref. #Noctis), you must do all the work from the MainPage.xaml.cs in this case. You must then find some way to pass arguments back to MainPage in order to change the content.
Usually this is done in a ViewModel, as #Noctis says.

Related

How to add AppTitle to NavigationView

Is installed the Fall update and tried out the Navigation View control. Seems close enough to the Hamburger control from the UWP toolkit.
But i am having trouble adding a custom app title to the page. The directions in the article are kinda unclear to me:
Drawing into the title bar has the side-effect of hiding your app's title. To help users, restore the title by adding your own TextBlock. Add the following markup to the root page containing your NavigationView.
This is followed by this xaml:
<!-- Page attribute -->
xmlns:appmodel="using:Windows.ApplicationModel"
<TextBlock x:Name="AppTitle" Style="{StaticResource CaptionTextBlockStyle}" Text="{x:Bind appmodel:Package.Current.DisplayName}" IsHitTestVisible="False"/>
So i thought i'd drop this XAML code inside my Pages grid, but i don't get an App Title. Where do i need to drop this code to make it work?
Heres my page xaml
<Page
x:Class="MyPage"
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:appmodel="using:Windows.ApplicationModel"
mc:Ignorable="d">
<Grid>
<TextBlock x:Name="AppTitle" Style="{StaticResource CaptionTextBlockStyle}" Text="{x:Bind appmodel:Package.Current.DisplayName}" IsHitTestVisible="False"/>
<NavigationView>
<Frame x:Name="ContentFrame" Margin="24">
<ContentControl />
</Frame>
</NavigationView>
</Grid>
</Page>
Your TextBlock is hidden behind your NavigationView. This is more obvious if you have a long enough title that it extends past the Nav Pane:
You can put it on top by switching the order in Xaml:
<Grid>
<NavigationView>
<Frame x:Name="ContentFrame" Margin="24">
<ContentControl />
</Frame>
</NavigationView>
<TextBlock x:Name="AppTitle" Style="{StaticResource CaptionTextBlockStyle}" Text="{x:Bind appmodel:Package.Current.DisplayName}" IsHitTestVisible="False"/>
</Grid>

How to create only binding not null controls in xaml?

I`d like select between combobox and textbox depending on ViewModel. In the view model i have two properties one of them should be null and the other not null.
enter image description here
I´m not sure if that´s exactly what you want to do. As CarbineCoder already said, some more code would be helpful. If you want to show only one of both controls you could create two properties called for example tbVisibility and cbVisibility. If you want to show the ComboBox, then cbVisibility has to be "visible" and tbVisibility has to be "hidden".
XAML would like that:
<StackPanel Orientation="Horizontal">
<!--This is visible if tbVisibility is "visible" and cbVisibility is "hidden"-->
<Label Width="100" Content="label" Visibility="{Binding tbVisibility}"></Label>
<TextBox Width="184" Text="Textbox" Visibility="{Binding tbVisibility}"></TextBox>
<!--This part is visible if cbVisibility is "visible" and tbVisibility is "hidden"-->
<Label Width="100" Content="label" Visibility="{Binding cbVisibility}"></Label>
<TextBox Width="184" Visibility="{Binding cbVisibility}"></TextBox>
</StackPanel>
You only have to define in you code which property is visibile and which is not.

Open popup at the location of the button clicked

I am trying to create a popup that opens similar to the window preview option in Windows 8 taskbar. Basically, when I click or hover on a button, it opens a popup with basic information just above the button. Here is an example.
Right now, I am able to open the popup at either the extreme left or extreme right side of the page, using the code below.
<Frame x:Name="PopUpFrame" HorizontalAlignment="Left" Visibility="Hidden" Height="400" Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Bottom" Width="400" Source="/BasicApp;component/StandingOrderPopUp.xaml" NavigationUIVisibility="Hidden"/>
I have 3 different buttons in the button bar, so I cannot set the fixed margin. I am trying to set the same in code but I am unable to get the absolute position and convert it to margin property. I am not sure, if there is a better solution either.
Edit:
Tried using popup but it doesn't open on button click.
<Popup x:Name="PopUpFrame" Placement="Top" PlacementTarget="{Binding ElementName=StandingOrderButton}" Width="400" Height="400">
<DockPanel Background="#770081a7">
<Canvas DockPanel.Dock="Bottom" x:Name="PopupButtonBar" Height="50" VerticalAlignment="Bottom">
<Button Height="30" Width="125" HorizontalAlignment="Right" VerticalAlignment="Center" Canvas.Top="10" Content="CLOSE" Foreground="White" Background="#ff0081a7" BorderBrush="White" FontFamily="Trebuchet MS" Canvas.Left="10" />
</Canvas>
<Label Margin="5,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DockPanel.Dock="Top" Content="STANDING ORDERS" Foreground="#ffffffff"></Label>
<Grid DockPanel.Dock="Top">
<Border BorderThickness="2" BorderBrush="#FFff7a00"></Border>
<RichTextBox Margin="2" Foreground="#FF0081a7" FontFamily="Trebuchet MS" IsEnabled="False"/>
</Grid>
</DockPanel>
</Popup>
And here is the event handler.
Private Sub StandingOrder_Click(sender As Object, e As RoutedEventArgs)
PopUpFrame.Visibility = Windows.Visibility.Visible
End Sub
Edit:
Never mind. I am an idiot. Instead of setting IsOpen property, I set the visibility. :(
It works perfectly, although, I had to copy the whole design from the separate page to this one. Still better than nothing. Only problem now is if I click on something else, I will have to write code to make sure popup is closed.
You can use a Popup control, coupled with it's Placement property to display your popup based on the current location of your buttons.
<Popup Placement="Top" PlacementTarget="{Binding ElementName=yourButton}" ... />
Inside your Popup, you can place your UserControl or any content element which will act as the popup's content.
See here for further information on popup placements, and here for a tutorial on WPF Popup controls.
Think about using ContextMenu, and set it's content you whatever you want. Thats is the solution for you.
This is how i defined one of my popups:
<Popup x:Name="btnPowerPopup" Placement="Mouse" StaysOpen="False">
....
</Popup>
you can user from the code behind on a button click or something :
btnPowerPopup.IsOpen = true;
and when the job is done:
btnPowerPopup.IsOpen = false;
But StaysOpen="False" let's you close the PopUp when clicking somewhere else.

WPF Bitmap effect error on image source

What I am trying to do is use the Imagebox as source for my bitmap effect and i dont know how to do that.My imagebox is called image1 .
<Button Content="Blur" Height="23" HorizontalAlignment="Left" Margin="148,12,0,0" Name="button3" VerticalAlignment="Top" Width="42" Click="button3_Click" >
<Image Source ="image1">
<Image.BitmapEffect>
<BlurBitmapEffect Radius="5" />
</Image.BitmapEffect>
</Image>
</Button>
Are you using MVVM? If not, I highly recommend using this pattern because WPF is built to use it and if you don't, you will fight it all the way.
Create a ViewModel class. Create a public property of type Image in this ViewModel class.
Create an instace of the ViewModel and put it into your Window's datacontext. Then add a binding to this property.
Alternatively for a quick fix (please note that this leads to darkness, you will regret having started to program this way):
<Image Source="{Binding Source, ElementName=image1}">
Edit:
Your edit is a completely different story: You have set the Content property twice: once by directly setting it and once by having a child object. Your button has both a text and an image as content. But a button (and most other controls) can only have one content. If you want both, your content needs to be a container control like a StackPanel that can have multiple contents and you need to put both your Image and your TextBlock in there.
Example (you need to put in Orientation and Alignment as you see fit):
<Button Height="23" HorizontalAlignment="Left" Margin="148,12,0,0" Name="button3" VerticalAlignment="Top" Width="42" Click="button3_Click">
<StackPanel>
<TextBlock Text="Test"/>
<Image Source="{Binding Source, ElementName=image1}">
<Image.BitmapEffect>
<BlurBitmapEffect Radius="5" />
</Image.BitmapEffect>
</Image>
</Button>

Windows Phone - Making Page Scrollable

I have the following code in xaml file of windows phone app:
<!--ContentPanel - place additional content here-->
<ScrollViewer>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Content="Save Details" Height="72" HorizontalAlignment="Left" Margin="9,870,0,0" Name="Button_SaveDetails" VerticalAlignment="Top" Width="216" />
<Button Content="Cancel" Height="72" HorizontalAlignment="Left" Margin="296,870,0,0" Name="Button_Cancel" VerticalAlignment="Top" Width="160" />
</Grid>
</ScrollViewer>
</Grid>
Now, even though the page is scrollable, I have two problems:
1) Some of the contents appear behind the application title
2) The buttons at the bottom are not fully visible (does not scroll entirely to the bottom)
Here is a screenshot showing the first problem
How can I solve these two problems please? Thanks
I think what you want to do is move the scroll viewer so that it is the top most element. Then put the grid inside of that. Don't have a grid surrounding the scroll viewer. From what code you posted I believe that is your issue.

Categories

Resources