How can I draw a line inside dockpanel?
Here
<DockPanel DockPanel.Dock="Bottom"
VerticalAlignment="Center">
<StackPanel DockPanel.Dock="Left"
VerticalAlignment="Center"
Orientation="Horizontal">
<Grid>
<!-- Play button. -->
<Button Name="btnPlay"
Click="btnPlay_Click"
Style="{StaticResource ResourceKey=PlayButton}"></Button>
<!-- Pause button. -->
<Button Name="btnPause"
Click="btnPause_Click"
Style="{StaticResource ResourceKey=PauseButton}"></Button>
</Grid> How to draw a Red color line here with height eqals to content of dockpanel ?
</StackPanel>
</DockPanel>
You should give a name of DockPanel or StackPanel inside it and add separator:
<Separator Width="{Binding ElementName=NameOfDockPanel, Path=ActualWidth}"
Background="Black" />
If you just simply place your "Separator" into the DockPanel rather then inside one of the child item, they will Stack and the "Separator" will have the full height of the DockPanel.
<DockPanel>
<StackPanel DockPanel.Dock="Left">
<TextBlock Text="Some other controls"/>
</StackPanel>
<Border Width="5"
Background="Red"
DockPanel.Dock="Left" />
<StackPanel DockPanel.Dock="Left"
VerticalAlignment="Center"
Orientation="Horizontal">
<TextBlock Text="Buttons and controls"/>
</StackPanel>
</DockPanel>
Use a rectangle and dock it where you want... And fill it as per your requirement..
example
Example for a line around your control (it could be around your dockPanel if you prefer, just put the border a level higher):
<DockPanel Name="MyDockPanel"
DockPanel.Dock="Bottom"
VerticalAlignment="Center">
<Border BorderBrush="Blue"
BorderThickness="3">
<!-- line around control -->
<StackPanel DockPanel.Dock="Left"
VerticalAlignment="Center"
Orientation="Horizontal">
<Grid>
<Button Name="btnPlay"
Click="btnPlay_Click"></Button>
<Button Name="btnPause"
Click="btnPause_Click"></Button>
</Grid>
</StackPanel>
</Border>
</DockPanel>
Example for a line at the bottom:
<DockPanel Name="MyDockPanel"
DockPanel.Dock="Bottom"
VerticalAlignment="Center">
<StackPanel DockPanel.Dock="Left"
VerticalAlignment="Center"
Orientation="Horizontal">
<Grid>
<Button Name="btnPlay"
Click="btnPlay_Click"></Button>
<Button Name="btnPause"
Click="btnPause_Click"></Button>
</Grid>
</StackPanel>
<Line Stroke="Red"
VerticalAlignment="Bottom"
X1="0"
X2="{Binding ActualWidth, ElementName=MyDockPanel}"
StrokeThickness="3"></Line>
</DockPanel>
Separator is a good idea, or you could draw a simple rectangle in the dockpanel:
<DockPanel DockPanel.Dock="Bottom"
VerticalAlignment="Center">
<StackPanel DockPanel.Dock="Left"
VerticalAlignment="Center"
Orientation="Horizontal">
<Grid>
<!-- Play button. -->
<Button Name="btnPlay"
Click="btnPlay_Click"
Style="{StaticResource ResourceKey=PlayButton}"></Button>
<!-- Pause button. -->
<Button Name="btnPause"
Click="btnPause_Click"
Style="{StaticResource ResourceKey=PauseButton}"></Button>
</Grid>
<Rectangle Width="5"
Fill="Red"
Margin="0" />
</StackPanel>
</DockPanel>
Related
I am building an app in WPF and I want to show a navigation stack panel to appear always on top of every other child window, just like how a menu bar functions.
My MainWindow.xaml has this code in a grid.
<!--// Navigation Panel //-->
<Grid
x:Name="nav_pnl"
HorizontalAlignment="Left"
Width="65"
Background="#2E333A"
Panel.ZIndex="1"
>
<StackPanel
x:Name="st_pnl"
>
<Grid
Background="#FF225277"
Height="100"
>
<TextBlock
Grid.Row="1"
Grid.Column="0"
Margin="73,-20,0,0"
Text="COMPANY"
Foreground="White"
FontSize="22"
Background="Transparent"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Style="{StaticResource styl_tb_font1}"
>
</TextBlock>
<ToggleButton
x:Name="Tg_Btn"
Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="18,-20,0,0"
Height="30"
Width="30"
>
<ToggleButton.Background>
<ImageBrush
ImageSource="Assets/tgBtn_default.png"
Stretch="None"
/>
</ToggleButton.Background>
</ToggleButton>
</Grid>
<!--// ListView with menu list items //-->
<ListView
x:Name="LV"
Background="Transparent"
BorderBrush="Transparent"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
>
<ListViewItem
HorizontalAlignment="Left"
Margin="0,0,0,15"
PreviewMouseLeftButtonUp="Dashboard__Click"
IsSelected="True"
>
<StackPanel
Orientation="Horizontal"
Width="230"
>
<Image
Source="Assets/ico_dashbrd.ico"
Stretch="Fill"
Width="30"
Height="30"
Margin="12,0,0,0"
/>
<TextBlock
Text="Dashboard"
Margin="25,0,0,0"
Style="{StaticResource styl_tb_font1}"
/>
</StackPanel>
</ListViewItem>
<ListViewItem
HorizontalAlignment="Left"
Margin="0,0,0,15"
>
<StackPanel
Orientation="Horizontal"
Width="230"
>
<Image
Source="Assets/icon2.ico"
Stretch="Fill"
Width="30"
Height="30"
Margin="12,0,0,0"
/>
<TextBlock
Text="Preference"
Margin="25,0,0,0"
Style="{StaticResource styl_tb_font1}"
/>
</StackPanel>
</ListViewItem>
<ListViewItem
HorizontalAlignment="Left"
Margin="0,0,0,15"
>
<StackPanel
Orientation="Horizontal"
Width="230"
>
<Image
Source="Assets/icon3.ico"
Stretch="Fill"
Width="30"
Height="30"
Margin="12,0,0,0"
/>
<TextBlock
Text="Sign Out"
Margin="25,0,0,0"
Style="{StaticResource styl_tb_font1}"
/>
</StackPanel>
</ListViewItem>
</StackPanel>
</Grid>
A separate window opens on click of the Dashboard.
Here is the cs code :
private void Dashboard__Click(object sender, MouseButtonEventArgs e)
{
Window1 wndw1 = new Window1();
wndw1.Owner = this;
wndw1.Show();
}
The problem here is shown in the screenshot.
While navigating on the panel, it must appear on the topmost of all the child windows so as to easily switch to another window (just like a menu bar). How can I achieve this?
Ok I have found the solution to this.
I just added a parent as <Popup> to the code above and it is working as expected. Now it also works when the child window has a property Topmost=true.
The code now looks like :
<Popup
IsOpen="True"
StaysOpen="True"
Placement="Relative"
Grid.Row="1"
>
<!-- // Grid named st_pnl -->
</Popup>
I'm trying to align below controls horizontally by keeping the label and the combobox on the left and both buttons on the right. I've tried different approaches using StackPanel but nothing gives me the desired output. Appreciate if you guys could point out what am I doing wrong here?
Current Layout
XAML source
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Center" Orientation="Vertical" Margin="0,0,0,2" >
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" VerticalAlignment="Center">
<Label Content="Age Bucket" HorizontalAlignment="Left" VerticalAlignment="Center" />
<ComboBox HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Width="100"
SelectedValue="{Binding SelectedAgeBucket}"
DisplayMemberPath="DisplayMember" SelectedValuePath="ValueMember"
ItemsSource="{Binding AgeBuckets}" IsSynchronizedWithCurrentItem="True"/>
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Center" Orientation="Horizontal" Margin="0,0,0,2">
<Button Click="Button_Click_1" Content="Export" HorizontalAlignment="Right" />
<Button HorizontalAlignment="Right" VerticalAlignment="Center" Click="Button_Click_2" Content="Print" Margin="5,0" />
</StackPanel>
</StackPanel>
<telerik:RadDataPager x:Name="radDataPager" Source="{Binding Items, ElementName=grdDetails}" PageSize="100" />
</StackPanel>
i want to have a centred popup notifications on my window ( Height="400" Width="500"). See the xaml code below. Is it possible to center it only with xaml (without the code behind)?
</Grid>
<TextBlock Text="TEXT" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="3" FontSize="200" FontWeight="Bold" HorizontalAlignment="Center"/>
<Grid Grid.Row="1" Grid.Column="1">
<Popup x:Name="PopupName" Grid.ColumnSpan="2" IsOpen="{Binding ElementName=ToggleButton,Path=IsChecked}" StaysOpen="False" Placement="Absolute"
AllowsTransparency="True" PopupAnimation="None" Focusable="False" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid Height="400" Width="500">
<Rectangle Fill="Silver" Opacity="0.5" Panel.ZIndex="1" Height="400" Width="500"/>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Panel.ZIndex="2" Height="150" Width="150">
<ListBox Height="Auto" HorizontalAlignment="Center" >
<Label Content="Red" Background="Red" Margin="5" VerticalAlignment="Top"/>
<Label Content="Green" Background="Green" Margin="5" VerticalAlignment="Center"/>
<Label Content="Yellow" Background="Yellow" Margin="5" VerticalAlignment="Bottom"/>
</ListBox>
</StackPanel>
<ToggleButton Panel.ZIndex="2" Background="Coral" Foreground="White" FontWeight="Bold" Name ="Button" Width="80" Height="30" HorizontalAlignment="Center" Margin="5,170,5,5" Content="Close" Click="Button_OnClick"/>
</Grid>
</Popup>
</Grid>
Another option was to use Placement ="AbsolutePoint" with Horizon-/Verticaloffset but it seems like a bit weird :D
Any suggestion? Thx ;)
This should center the Popup in the parent window:
<Popup ...
Placement="Center"
PlacementTarget="{Binding RelativeSource={RelativeSource AncestorType=Window}}" />
Below is my xaml for a button I would like to have a message fly out from:
<Button x:Name="ClearButton" HorizontalAlignment="Left"
Width="90" Margin="0,0,0,0"
Click="ClearButton_Click">
<StackPanel Orientation="Horizontal" Margin="-15,0,0,5" >
<Image Source="{StaticResource EraseButtonImageKey}"
Margin="5,0,0,0" Height="20" Width="20" />
<TextBlock VerticalAlignment="Center"
Padding="0,0,0,0" Margin="2,0,0,0">Clear</TextBlock>
</StackPanel>
</Button>
I would like to have a small single line of text fly out when a mouse pointer moves over a button in WPF. For example, if you are using the Chrome browser a small line of text fly's out when you move your cursor over the back arrow at the top which says "click to go back". How can I have a message like that pop out when I move a mouse pointer over a WPF button? The message I want displayed for my button would be "Removes all text from the results window."
Thanks in advance.
---- UPDATE FEB 9, 2019 ------
Thanks to the comment from the.doc I updated my code to the following which now gives me the result I was looking for:
<Button x:Name="ClearButton" HorizontalAlignment="Left"
Width="90" Margin="0,0,0,0"
Click="ClearButton_Click">
<StackPanel Orientation="Horizontal" Margin="-15,0,0,5" >
<Image Source="{StaticResource EraseButtonImageKey}"
Margin="5,0,0,0" Height="20" Width="20" />
<TextBlock VerticalAlignment="Center"
Padding="0,0,0,0" Margin="2,0,0,0">Clear</TextBlock>
</StackPanel>
<Button.ToolTip>
<ToolTip>
<StackPanel>
<TextBlock FontWeight="Bold">Removes all text from the result window</TextBlock>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
Below is the solution to the problem I had by using the Button.ToolTip feature which The.Doc suggested:
<Button x:Name="ClearButton" HorizontalAlignment="Left"
Width="90" Margin="0,0,0,0"
Click="ClearButton_Click">
<StackPanel Orientation="Horizontal" Margin="-15,0,0,5" >
<Image Source="{StaticResource EraseButtonImageKey}"
Margin="5,0,0,0" Height="20" Width="20" />
<TextBlock VerticalAlignment="Center"
Padding="0,0,0,0" Margin="2,0,0,0">Clear</TextBlock>
</StackPanel>
<Button.ToolTip>
<ToolTip>
<StackPanel>
<TextBlock FontWeight="Bold">Removes all text from the result window</TextBlock>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
I have listbox control with custom data template. I get the collection from webservice and bind that collection to listbox. When i scroll the list box top to bottom my listbox rows are changed and text are concatenate.
Please see the below images
This is my first screen
when scroll top to bottom once again
please compare two images my rows are changed
<Grid Margin="30,20,0,20" x:Name="MeGrid" Loaded="MeGrid_Loaded" Visibility="{Binding Path=_isMyMessage, Converter={StaticResource BoolToVisibilityConverter}}">
<StackPanel >
<TextBlock HorizontalAlignment="Right" Foreground="#00c0d4" Margin="0,0,100,0" Text="{Binding Path=CreatedDate, Converter={StaticResource TimeSinceConverter}}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Grid Background="#ffffff" Height="auto" Width="auto" MaxWidth="300" MinWidth="50">
<StackPanel Background="White">
<RichTextBox Name="MeRich" Background="White" MaxHeight="600" Foreground="Red"
FontFamily="Segoe UI" Margin="10,0,10,0" VerticalAlignment="Center"
TextWrapping="Wrap" Height="auto"
Width="auto" MinWidth="50"
MaxWidth="300"
local:Properties.Html="{Binding Path=MessageText}">
</RichTextBox>
<readMore:Readmore Source="{Binding Path=MessageText}" Visibility="{Binding ActualHeight,
ElementName=MeRich, Converter={StaticResource ReadMoreVisibilityConverter}}" ></readMore:Readmore>
<!--<TextBlock Margin="10,0,10,0" VerticalAlignment="Center" Foreground="Black" TextWrapping="Wrap" Height="auto" Width="auto" MinWidth="50" MaxWidth="300" Text="{Binding Path=MessageText}"
/>-->
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding Path=AttachmentList}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5,0,5">
<Button Click="Image_Download" Loaded="Button_Loaded" Tag="{Binding .}" Width="80" Height="80" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<ContentControl Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Button.Template>
<Image Source="/Resources/Drawable/c_image.png" Tag="{Binding .}" />
</Button>
<ProgressBar VerticalAlignment="Bottom" IsIndeterminate="true" Visibility="Collapsed" Style="{StaticResource CustomIndeterminateProgressBar}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
<Rectangle Margin="20,0,0,0" VerticalAlignment="Top" RadiusX="50" RadiusY="50" Width="80" Height="80">
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding Path=UserPictureURL}"/>
</Rectangle.Fill>
</Rectangle>
</StackPanel>
</StackPanel>
</Grid>