how to use progress bar in wpf popup control? - wpf

I am using C# and WPF for my GUI. My goal is to display a progress bar under the wpf popup control.
I am using below code add a progress bar under the popup control.
<Popup HorizontalAlignment="Left" Margin="338,261,0,0" Name="popup1" VerticalAlignment="Top" Height="38" Width="153" >
<StackPanel Background="Red">
<ProgressBar Height="15" HorizontalAlignment="Left" Margin="349,272,0,0" Name="progressBar1" VerticalAlignment="Top" Width="130" Foreground="#FF3EA3EA" Value="{Binding ElementName=textBox1, Path=Text.Length, Mode=OneTime}" Maximum="140" />
</StackPanel>
</Popup>
Please Help me.
Thanx in advanced!

You should use below code for showing ProgressBar under the Popup control:
<Popup Name="popup1" HorizontalAlignment="Left" Margin="338,261,0,0" AllowsTransparency="True" VerticalAlignment="Top" Height="38" Width="153">
<Grid>
<ProgressBar HorizontalAlignment="Left"
Name="progressBar1" Height="25"
VerticalAlignment="Center" Width="130"
Foreground="#FF3EA3EA"
Value="{Binding ElementName=textBox1, Path=Text.Length, Mode=OneTime}"
Maximum="140" ForceCursor="False" />
</Grid>
</Popup>

Related

Set the button on top of the video streaming[WPF]

I use LibVLCSharp.WPF in a WPF application.
I want to put some icons and buttons above the video.
But after the VideoView control has loaded, it overwrite everything.
<Canvas Width="325" Height="182">
<Image Source="/Resource/BgLoading_1.png"
Width="325"
Height="182"
Stretch="Fill"
StretchDirection="Both"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Panel.ZIndex="0"
Visibility="Visible" />
<fa:ImageAwesome Foreground="White"
Icon="Spinner"
Spin="True"
Height="48"
Width="48"
Visibility="{Binding LoadImageStatus}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Canvas.Left="139"
Canvas.Top="67" />
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
<Image x:Name="imgRightIcon"
Width="30"
Height="30"
Source="{Binding RightIconSource}"
Stretch="Fill"
Margin="285,10,10,142"
Visibility="{Binding RightIconStatus}"
Panel.ZIndex="2" />
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Canvas>
RTFM
The controls that must appear on top of the video should be placed as children of the VideoView element.
<Window ...
xmlns:vlc="clr-namespace:LibVLCSharp.WPF;assembly=LibVLCSharp.WPF"
...>
<Grid>
<vlc:VideoView x:Name="VideoView">
<Button x:Name="PlayButton"
Click="PlayButtonOnClick"
Content="Play"
Margin="8"
HorizontalAlignment="Right"
VerticalAlignment="Bottom" />
</vlc:VideoView>
</Grid>
</Window>
Avoid Canvas since they are pretty dumb.
Working example sources based on the manual.
I haven't used vlc, if it covers the icons, I think it should be a window drawn with a separate handle. just like WindowsFormHost. try use Popup control, it can be displayed on top of any control.
<Grid>
<!--video control-->
<Grid Name="video">
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Grid>
<Popup PlacementTarget="{Binding ElementName=video}" Placement="Center">
<Grid>
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
</Grid>
</Popup>
</Grid>

WPF, how to adjust groupbox transparency

I have a WPF application with a nice background picture. However, when I place some elements to the form I want them to be not so transparent.
For example simple groupbox:
<GroupBox x:Name="LocationGroup" Grid.Column="1" Grid.Row="1" Header="Location" HorizontalAlignment="Left" Height="100" Margin="10,90,0,0" VerticalAlignment="Top" Width="734">
<Grid Margin="1,1,1,1">
<Label Content="Location" HorizontalAlignment="Left" Margin="5,5,0,0" VerticalAlignment="Top"/>
<ComboBox x:Name="LocationCombo" HorizontalAlignment="Left" Margin="5,36,0,0" VerticalAlignment="Top" Width="100"
DisplayMemberPath="LocationDescr" SelectedValuePath="LocationNr" SelectedValue="{Binding Path=Location}">
</ComboBox>
</Grid>
</GroupBox>
I have tried setting the group box (and grid) opacity properties, but it only affects to the label and combo box opacity, not the background.
What I'm looking for is just like the element in the right in the picture linked below:
Opacity example
Here's one way you can achieve it:
<Grid>
<Grid.Background>
<ImageBrush ImageSource="path\to\backgroundimage" Stretch="UniformToFill"/>
</Grid.Background>
<Grid Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" Height="100" Width="400" Margin="10,90,0,0" VerticalAlignment="Top">
<Grid Background="White" Opacity="0.5"></Grid>
<GroupBox x:Name="LocationGroup" Header="Location">
<Grid Margin="1,1,1,1">
<Label Content="Location" HorizontalAlignment="Left" Margin="5,5,0,0" VerticalAlignment="Top"/>
<ComboBox x:Name="LocationCombo" HorizontalAlignment="Left" Margin="5,36,0,0" VerticalAlignment="Top" Width="100"
DisplayMemberPath="LocationDescr" SelectedValuePath="LocationNr" SelectedValue="{Binding Path=Location}">
</ComboBox>
</Grid>
</GroupBox>
</Grid>
</Grid>

stackpanel containing button does not fire command wpf

I have a stackpanel that contains many elements including buttons. I am not able to fire a method through ICommands. It works through adding an event handler in the code behind for the Button.Click event. Since, I am following a MVVM pattern, I want to fire a command. Also, this stackpanel is a datatemplate for my listviewitem.
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" IsHitTestVisible="True">
<Button Cursor="Hand" Command="{Binding MoveImageUp}">
<Button.Background>
<ImageBrush ImageSource="..."/>
</Button.Background>
</Button>
<Grid>
<Image Source="{Binding Path=Image}"/>
<TextBlock Height="20" Width="20" Text="{Binding Path=Order}" Opacity="0.8" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
<GridSplitter HorizontalAlignment="Center" Padding="1" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
I have tried setting IsHitTestVisibile to true, does not work.
There was no DataContext set for the button. Thanks #Foggy Finder
<Button Cursor="Hand" Command="{Binding ElementName=ImagesList, Path=DataContext.MoveImageUp}" CommandParameter="{Binding}">

Put TextBlock on top of another TextBlock

I tried to implement case in which one TextBlock appears on top of another TextBlock, playing with Visibility property - but it doesn't working yet.
TextBlock are inside DockPanel:
<DockPanel Grid.Row="1" Margin="5">
<TextBlock Text="Text1" Height="20" HorizontalAlignment="Right" DockPanel.Dock="Right">
<TextBlock Text="Text2" Background="Aqua" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="{Binding IfDeviceSelected, NotifyOnSourceUpdated=True, Converter={StaticResource ResourceKey=BoolToVisibilityConverter}}" />
</TextBlock>
<TextBlock Text="#Device Focus:" Height="20" HorizontalAlignment="Right" DockPanel.Dock="Right" />
</DockPanel>
You will want to use a Grid to group these TextBlocks, DockPanel/StackPanel will not allow overlapping controls(without horrible manipulation of Margins etc)
<DockPanel Grid.Row="1" Margin="5" >
<Grid DockPanel.Dock="Right" >
<TextBlock Text="Text1" />
<TextBlock Text="Text2" Background="Aqua" Visibility="{Binding IfDeviceSelected, NotifyOnSourceUpdated=True, Converter={StaticResource ResourceKey=BoolToVisibilityConverter}}" />
</Grid>
<TextBlock Text="#Device Focus:" Height="20" HorizontalAlignment="Right" DockPanel.Dock="Right" />
</DockPanel>

I unable to get child control from ListBox control in WPF using MVVM

I am in serious trouble. I have listbox control in which i have many combo box. whenever select the value in combo box, i have to make other controls as hidden. i am using MVVM pattren. i am unable to get the child controls from ListBox control but i can get the ListBox control in viewmodel. How can i get these controls in viewmodel? Is it possible? I am using framework 4.0. i have shown the code below which write in view.
<ListBox x:Name="lstItems" MaxHeight="300" FontSize="11" Margin="12,0,20,38" ItemsSource="{Binding Source={StaticResource listedView}, Path=myItemsSource, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
<ListBox.ItemTemplate >
<DataTemplate>
<Border BorderBrush="Blue" Margin="0,4,0,4" BorderThickness="1" CornerRadius="5">
<StackPanel Orientation="Horizontal">
<Label Content="Show rules where:" Name="lblshowrules"></Label>
<ComboBox x:Name="cboShowRuleWhere" Height="20" Width="200" ItemsSource="{Binding Source={StaticResource listedView}, Path=FilterRules}" DisplayMemberPath="RuleName" SelectedValuePath="RuleId" SelectedValue="{Binding Source={StaticResource listedView}, Path=SelectedRuleName, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" ></ComboBox>
<Grid Height="29" HorizontalAlignment="Left" Name="grid1" VerticalAlignment="Top" Width="496" Grid.Row="1" Margin="0,0,0,0">
<ComboBox Height="21" HorizontalAlignment="Left" Margin="6,4,0,0" x:Name="cboRuleCondtion" VerticalAlignment="Top" Width="212" />
<TextBox Height="20" HorizontalAlignment="Left" Margin="242,3,0,0" x:Name="txtValue" VerticalAlignment="Top" Width="245" Visibility="Hidden"/>
<ComboBox Height="21" HorizontalAlignment="Left" Margin="224,3,0,0" x:Name="cboValue" VerticalAlignment="Top" Width="205" Visibility="Hidden" />
<DatePicker Height="28" HorizontalAlignment="Left" Margin="242,-3,0,0" x:Name="dtpFromDate" VerticalAlignment="Top" Width="98" Visibility="Hidden" />
<DatePicker Height="31" HorizontalAlignment="Left" Margin="346,-3,0,0" x:Name="dtpToDate" VerticalAlignment="Top" Width="98" Visibility="Hidden"/>
</Grid>
<Button Name="cmdAddLevel" Padding="0" Margin="-1,1,0,-1" Width="75" Command ="{Binding Source={StaticResource listedView}, Path=AddLevelCommand, UpdateSourceTrigger=PropertyChanged}" BorderBrush="White" BorderThickness="1" Height="25" HorizontalContentAlignment="Center">
<StackPanel Orientation="Horizontal">
<Image Height="16" Width="16" HorizontalAlignment="Left" Margin="1,0,0,-1">
</Image>
<TextBlock Text="Add Level" FontWeight="Bold" Height="16" Width="70" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="8,2,0,-1" />
</StackPanel>
</Button>
<Label Name="lblDeleteLevel" Margin="3,0,0,0" Width="75" TabIndex="7" HorizontalAlignment="Left">
<Hyperlink >
<TextBlock Text="Delete Level" />
</Hyperlink>
</Label>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
Please help me. once again, i want to know how to get the child control from parent control... Is it possible?
Using the MVVM pattern, you should not be referencing any of the controls directly. Alternatively, you should create a boolean property on your viewmodel that decides if various controls should be visible. Then bind the Visibility property of the controls you want to hide to this property, using a converter.
See this previous Q/A for details on visibility converters: Link

Resources